如何创建点击触发双动作的按钮？实现OTP发送提示与页面跳转

看起来你遇到的核心问题是页面跳转中断了OTP发送逻辑的执行——原来的按钮点击时先调用one()直接跳转页面，导致后面的phoneAuth()还没来得及完成Firebase的验证码发送请求，页面就已经刷新卸载了，自然看不到提示也收不到验证码。

问题根源 #

window.location.href是同步操作，一旦执行会立即终止当前页面所有未完成的JavaScript代码。所以你不能把跳转和发送请求的函数放在同一个onclick里顺序执行，必须等验证码发送成功的回调完成后，再执行跳转操作。

修正后的解决方案 #

1. 修改HTML按钮的点击事件

只保留phoneAuth()调用，移除多余的one()：

<div class="col-md-12"> 
 <div class="form-group"> 
 <input type="text" id="number" name="phone" class="form-control" placeholder="Phone Number" required> 
 <br> 
 <div id="recaptcha-container"></div> 
 <button id="verify" class="block" type="button" onclick="phoneAuth();"> Send Verification Code </button> 
 </div> 
</div>

2. 调整JavaScript的phoneAuth()函数

在Firebase发送验证码成功的.then()回调里，添加页面跳转逻辑，同时保留提示：

window.onload = function () { render(); }; 
function render() { 
 window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container'); 
 recaptchaVerifier.render(); 
} 

// 移除原来的one()函数，将跳转逻辑移到发送成功的回调中
function phoneAuth() { 
 // 获取用户输入的手机号
 var number = document.getElementById('number').value; 
 // 调用Firebase手机号认证接口
 firebase 
 .auth() 
 .signInWithPhoneNumber(number, window.recaptchaVerifier) 
 .then(function (confirmationResult) { 
 window.confirmationResult = confirmationResult; 
 coderesult = confirmationResult; 
 console.log(coderesult); 
 alert("OTP验证码已发送至您的手机，请前往验证页面输入"); 
 // 发送成功后跳转到验证码输入页面
 window.location.href = 'Verify-OTP-Code.html'; // 替换成你的验证页面实际路径
 }) 
 .catch(function (error) { 
 alert("验证码发送失败：" + error.message); 
 }); 
} 

function codeverify() { 
 var code = document.getElementById('verificationCode').value; 
 coderesult 
 .confirm(code) 
 .then(function (result) { 
 alert("手机号验证成功"); 
 var user = result.user; 
 console.log(user); 
 // 这里可以添加验证成功后的后续逻辑，比如跳转到主页
 }) 
 .catch(function (error) { 
 alert("验证码错误：" + error.message); 
 }); 
}

额外优化建议 #

• 尽量避免使用原生alert，可以用自定义模态框或Toast组件替代，提升用户体验；
• 在按钮点击后添加加载状态（比如禁用按钮+显示加载动画），防止用户重复点击导致重复请求；
• 若验证页面需要复用confirmationResult，可以通过sessionStorage临时存储相关信息，确保跨页面能正常完成验证码验证流程。

内容的提问来源于stack exchange，提问作者WAP