在链接点击和 setTimeout

Question

在 JavaScript 中，我试图在单击链接 2 秒后执行 function，并等到 function 完成其执行后再转到目的地。

/* 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没有时间执行。 我在这里错过了什么吗？

预先感谢。

Answer 1

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

并且由于您想点击链接（一旦 function 完成），您将需要通过 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/

Answer 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

}

演示在这里

Answer 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;
    }