javascript - 单击<a>标签时，jQuery无法正确延迟

当单击<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>

最佳答案

问题在于浏览器正在使用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秒钟内，没有什么可以阻止用户执行其他操作，因此请确保处理您不希望发生的用户流（例如其他事件处理程序等）。