在链接点击和 setTimeout答案

【问题标题】：Upon Link Click and setTimeout在链接点击和 setTimeout
【发布时间】：2011-07-07 18:39:51
【问题描述】：

在 JavaScript 中，我试图在单击链接 2 秒后执行一个函数，并等待该函数完成执行，然后再转到链接目标。

/* JavaScript */
function myFunction() { /* Block of code, with no 'return false'. */ }

<!-- HTML -->
<a onclick="setTimeout(myFunction, 2000);" href="http://www.siku-siku.com">Link</a>

问题在于点击后，浏览器立即转到链接目的地，即myFunction 没有时间执行。我错过了什么吗？

先谢谢了。

【问题讨论】：

标签： javascript

【解决方案1】：

您需要在 onclick 事件中 return false 以取消实际浏览器处理的页面加载。

而且由于您想点击链接（功能完成后），您需要通过 javascript 来完成。但是您正在使用超时，因此您失去了对单击元素的引用，因此我们也需要在方法中传递它（如果您希望此逻辑用于多个链接）

html

<a onclick="return createTimedLink(this, myFunction, 2000);" href="http://www.siku-siku.com">Link</a>

javascript

function createTimedLink(element, callback, timeout){
  setTimeout( function(){callback(element);}, timeout);
  return false;
}

function myFunction(element) { 
/* Block of code, with no 'return false'. */
  window.location = element.href;
 }

http://jsfiddle.net/gaby/mdkjX/2/ 上的演示

【讨论】：

【解决方案2】：

<a onclick="setTimeout(myFunction, 2000);" href="#">Link</a>

JAVASCRIPT

function myFunction(){
////your other code
///
///
window.location="http://www.siku-siku.com";//at the end

}

demo here

【讨论】：

【解决方案3】：

是的，链接的默认行为是浏览器发送的 GET 请求。想象一下，在你注册你的处理程序之前，浏览器已经注册了另一个处理程序来发起一个获取请求（只是想象的）。这里就是这种情况。您应该在您的内联处理程序中返回 false：

   onclick = '(function(){ setTimeout(yourFunction, 2000); return false;})()'

或更简单：

   onclick = 'setTimeout(yourfunction, 2000); return false;'

更新：

使用这个（它需要 jQuery）：

    $(function () {
        $('a').click(function (e) {
            e.preventDefault();
            var target = $(this).attr('href');
            setTimeout('go("' + target + '")', 2000);
        });
    });
    function go(target) {
        console.log('2 seconds passed');
        document.location = target;
    }

【讨论】：

我刚试了一下，浏览器还是立即跳转到链接目的地。另外，return false，我们实际上不是告诉浏览器不要跟随链接吗？