延迟点击事件

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链接.

任何帮助都会很棒!谢谢.

编辑:所以我想我的问题并不完全清楚,所以我将尝试在下面提供更多细节.

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

即我想延迟不是异步函数的开始,而是延迟页面转换的开始.单击发生后,异步功能将立即开始运行.

希望这更清楚一点!

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

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