移动端setTimeout()导致表单提交提示不显示问题求助

你的setTimeout是在全局作用域下执行的——页面一加载就启动了10秒的倒计时，时间到了就会把提示框隐藏。而移动端用户的操作节奏通常更慢，或者网络响应速度不如桌面端，当你提交表单、Ajax返回结果并设置提示内容时，这个10秒的倒计时可能已经结束，提示框已经被fadeOut隐藏了，所以你看不到任何提示。

另外还有一个潜在问题：如果用户多次提交表单，之前的定时器不会被清除，可能导致提示框在不符合预期的时间点隐藏。

你需要把定时器的逻辑和提示信息的显示绑定在一起——每次显示提示时，先确保提示框是显示状态，清除之前的定时器，再启动新的10秒隐藏倒计时。

修改你的JavaScript代码如下：

首先，声明一个全局变量来存储定时器ID，方便后续清除：

let passwordMsgTimer = null;

然后修改updatepassword函数，在设置提示信息的地方添加定时器逻辑：

function updatepassword(){
  var user_password = document.getElementById('user_password').value;
  var user_confirm_password = document.getElementById('user_confirm_password').value;
  const msgElement = document.getElementById('password_response_msgs');
  
  // 先清除之前的定时器，避免冲突
  if(passwordMsgTimer) {
    clearTimeout(passwordMsgTimer);
    passwordMsgTimer = null;
  }
  
  if(user_password==''){
    msgElement.innerHTML = 'Please Enter Password';
    // 确保元素显示，然后启动新的定时器
    $(msgElement).show();
    passwordMsgTimer = setTimeout(function() {
      $(msgElement).fadeOut('slow');
    }, 10000);
  }else if(user_confirm_password==''){
    msgElement.innerHTML = 'Please Enter Confirm Password'; // 修正了拼写错误
    $(msgElement).show();
    passwordMsgTimer = setTimeout(function() {
      $(msgElement).fadeOut('slow');
    }, 10000);
  }else{
    $.ajax({
      url: "<?php echo BASE_URL;?>ajax/save-profile.php",
      data:{command:'updatepassword',password:user_password,user_confirm_password:user_confirm_password,user_id:<?php echo $user_id;?>},
      cache: false,
      success: function(res) {
        msgElement.innerHTML = res;
        // 确保元素显示，然后启动新的定时器
        $(msgElement).show();
        passwordMsgTimer = setTimeout(function() {
          $(msgElement).fadeOut('slow');
        }, 10000);
      }
    });
  }
}

• 修正了你代码里的拼写错误：Confirm Passowrd → Confirm Password
• 将提示元素的获取逻辑提取到变量中，避免重复DOM查询，提升性能
• 添加了定时器的清除逻辑，防止多次提交时出现的计时混乱问题
• 每次设置提示内容前强制显示元素，确保即使之前被隐藏，也能正常显示新的提示

这样修改后，不管是桌面端还是移动端，只要提示信息被设置，就会先显示出来，然后启动10秒的自动隐藏倒计时，不会再出现移动端提示不显示的问题。

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