Question

当我点击<a>标签时，我想要显示一个div，我想在重定向之前等待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);
    });
});

点击<a> tag</a>时Jquery没有正确延迟

2 个答案: