单击链接并设置超时

Question

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

先谢谢了。

Answer 1

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

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