Question

我想知道是否有一种简单的方法可以延迟点击事件在指定的时间段内被处理。例如，我们可以

$('#someElement').on('click', 'a', function(event) {
    var duration = 1000;
    someAsynchronousFunction(); // Start as soon as click occurs
    ... // Code to delay page transition from taking place for duration specified
});

因此在这种情况下，异步函数将保证运行一段时间。如果它还没有完成它的工作，那么我就不在乎了，只想继续进行页面转换。我知道可以用

来完成一些事情

event.preventDefault();
...
setTimeout(function(){
    window.location = $(this).attr('href');
}, duration);

但这仅在被点击的链接转到整页时才有效。我希望能够处理用于ajax调用的链接（不会更改url）。

我注意到mixpanel库有一个track_links函数，它似乎可以实现页面转换的延迟，尽管这个函数似乎不能很好地支持我提到的ajax链接。

任何帮助都会很棒！感谢。

修改：所以我想我的问题并不完全清楚，所以我将尝试在下面提供更多详情。

我不在乎异步函数是否完成运行！我只想保证它有一定的时间来执行，之后我不在乎它是否完成，并且更愿意继续进行页面转换。

即。我想延迟不是async函数的开始，而是延迟页面转换的开始。一旦发生点击，异步功能就会开始运行。

希望这更清楚一点！

Answer 1

所以最后我想出了一种方法来解决我提出的问题，我在这里提供它，以防其他人遇到同样的问题并且正在寻找解决方案。

var secondClick = false;
var duration = 1000;

$('#someElement').on('click', 'a', function(event) {
    var that = $(this);

    if(!secondClick) {
        event.stopPropagation();
        setTimeout(function(){
            secondClick = true;
            that.click();
        }, duration);

        someAsynchronousFunction();
    } else {
        secondClick = false;
    }
}

基本上，当用户点击链接时，它会在内部阻止该点击实际产生任何影响，并在异步功能执行工作之前为异步功能提供一定的时间来完成其工作。

Answer 2

setTimeout允许您按照您想要的ms来延迟运行代码

setTimeout(function(){
    console.log('Stuff be done'); //This will be delayed for one second
}, 1000);

实际上，如果你正在处理ajax，你想在ajax调用完成时做出响应。可能需要多于或少于1000毫秒。 $.ajax允许您使用.done()方法执行此操作。这是文档中的一个示例：

$.ajax({
    url: "test.html",
    context: document.body
}).done(function() {
    $(this).addClass("done");
});

Answer 3

window.setTimeout将在指定的延迟后执行任何给定的函数。

你会这样称呼它：

$('yourElement').click(function (event) {
    setTimeout(function () { console.log('hi'); }, 1000);
});

但我不得不想知道你为什么需要这样做。你试图解决的问题是什么？通常延迟的东西并没有真正解决任何问题。

Answer 4

我在@ Sushanth的代码中添加了“flag”：

<强>的Javascript

$('#someElement').on('click', 'a', function(event) {
    var duration = 1000;
    var someAsynchronousFunction_status = false; // flag

    setTimeout(function() {
       if (!someAsynchronousFunction_status) {
            // this code will run after the duration elaspes but
            // ONLY if someAsynchronousFunction() return false or nothing
       }
    }, duration);

    someAsynchronousFunction_status = someAsynchronousFunction(); // redefine flag
});

如果someAsynchronousFunction（）返回除false以外的任何内容，您可以尝试这样做。

Answer 5

jQuery的ajax功能提供了您正在寻找的内容。您可以定义一个回调函数，以便在ajax请求之后运行。

这样的事情：

$('#someElement').click(function(event){
    event.preventDefault();
    var loc = $(this).attr('href');
    $.ajax({
        url: "test.html",
        complete: function(){
            // Handle the complete event
            loc = $(this).attr('href');
            window.location.href = loc;
        }
    });
});

您可能希望使用 ajaxStop 而不是完成，似乎您推迟导航的动机是因为您有一堆异步的东西正在进行而您想要在导航到该页面之前，请确保所有ajax内容都已完成。

无论我建议查看http://api.jquery.com/Ajax_Events/（一个非常有用的文档页面）。

延迟点击事件

5 个答案: