javascript - 当alert()框打开并且在一段时间内没有点击 "OK"时如何重定向页面

Question

当我单击按钮时，会打开一个alert()框。警报仅具有“确定”作为输入。 1. 如果此人在一段时间内(2秒)没有点击“确定”，我想重定向 2. 是否有更好的弹出窗口，用户无需单击任何内容，仅显示消息并重定向。除(提示、警报、确认)之外的其他内容

如果他点击“确定”，我也想重定向到同一页面，我已经这样做了。

$(document).ready(function() {
  $('.btn').click(function(e) {

    e.preventDefault();
    var popup = alert("Thank you");

    if (!popup) {
      window.location.href = "www.google.com";
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="submit" value="Submit" class="btn" style="background: #FF3900; color: #fff;">
</form>

如果弹出窗口后没有采取任何操作，则需要重定向。单击按钮并显示弹出窗口后，我的页面不执行任何操作。如果我更改选项卡，它会由于某种原因自动重定向到所询问的网站。

Answer 1

如前所述，警报正在阻止进一步的代码执行。一种解决方法是创建自定义弹出窗口，并在打开后启动计时器。然后，如果在弹出窗口内未单击按钮，则重定向，如果单击，则中止超时。例如:

 $(document).ready(function() {
      var $activeTimer; // global timer to track inactivity

      $('.btn').click(function(e) {
        e.preventDefault();
        $('#popup').addClass('active'); // show the popup on click
        
        // start the timer
        $activeTimer = setTimeout(function(){
            // do something after certain seconds of inactivity
            window.location.href = "www.google.com";
        }, 3500)
      });
      
      // if ok button in popup is clicked, abort the timer for example
      $('#confirm').on('click', function(e) {
        e.preventDefault();
        clearTimeout($activeTimer);
        // do something when clicked
      })
    });

#popup {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   opacity: 0;
   z-index: -1;
   padding: 2em 3em;
   border: 1px solid #333;
}

#popup.active {
  opacity: 1;
  z-index: 9999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
      <input type="submit" value="Submit" class="btn" style="background: #FF3900; color: #fff;">
      <div id="popup">
        <p>Thank you<p>
        <a href="" id="confirm">Ok</a>
      </div>
    </form>