Jquery 点击 <a> 标签时没有正确延迟

Question

我有一个 div 我想在我单击 <a> 标签时显示，我想在重定向前等待大约 10 秒，但它只显示 div无需等待即可重定向。

Html代码：

<a class="clickHereToDisplay" href="http://www.google.com">Click here to go</a>"
 <div class="hiddenDiv"></div>

Jquery代码：

<script>
$(document).ready(function(){
window.setTimeout(function(){

$(".clickHereToDisplay").click(function(){
   $('.hiddenDiv').text('THE TEXT I WANT TO DISPLAY WHEN THE HREF IS CLICKED');
   $('.hiddenDiv').show();
     });
  }),10000;
});
</script>

Answer 1

问题是浏览器正在使用 href 立即重定向。你想要这样的东西：

<a class="clickHereToDisplay" href="#" onclick="timedRedirect()">Click here to go</a>"
<div class="hiddenDiv"></div>

那么你的javascript:

var timedRedirect = function() {
    $('.hiddenDiv').text('THE TEXT I WANT TO DISPLAY WHEN THE HREF IS CLICKED');
    $('.hiddenDiv').show();
    window.setTimeout(function(){
        window.location.href = "http://www.google.com"
    }),10000);
};

另外一个注意事项；在接下来的 10 秒内没有什么可以阻止用户做其他事情，因此请确保处理您不希望发生的用户流（如其他事件处理程序等）。

Answer 2

您需要在点击处理程序中使用超时。

在点击处理程序中，您首先需要显示隐藏的 div 并使用计时器延迟重定向，您需要为此阻止点击的默认操作，然后在超时处理程序。

$(document).ready(function () {
    $(".clickHereToDisplay").click(function (e) {
        e.preventDefault();
        $('.hiddenDiv').text('THE TEXT I WANT TO DISPLAY WHEN THE HREF IS CLICKED').show();
        window.setTimeout(function () {
            window.location = e.currentTarget.href;
        }, 10000);
    });
});