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

您需要从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/

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

}

demo here

Answer 3

是的，链接的默认行为是浏览器发送的 GET请求。想象一下，在注册处理程序之前，浏览器已经注册了另一个处理程序来启动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;
    }

在链接点击和setTimeout

3 个答案: