延迟点击事件 [英] Delaying click event

问题描述

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

I'm wondering whether there's a simple way to delay the click event from being processed for a specified period of time. For example we could have

$('#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
});

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

So in this case the asynchronous function would be guaranteed some amount of time to run. If it hasn't completed it's work in this time I wouldn't care and would just like to continue with the page transition. I know that it's possible to accomplish something close with

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

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

But this only works when the link being clicked goes to a full page. I want to be able to deal with links that are used for ajax calls (which don't change the url) as well.

我注意到mixpanel库有一个函数track_links似乎完成了页面转换的延迟，尽管该函数似乎不能很好地支持我提到的ajax链接。

I noticed that the mixpanel library has a function track_links which seems to accomplish the delay on the page transition, though that function doesn't seem to work well with the support for ajax links that I mentioned.

任何帮助会很好！谢谢。

Any help would be great! Thanks.

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

Edit: So I suppose my question wasn't exactly clear, so I'll try to provide some more details below.

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

I don't care if the async function finishes running! I only want to give it the guarantee that it has some set amount of time to execute, after which I don't care if it finishes, and would prefer to go ahead with the page transition.

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

i.e. I want to delay not the start of the async function, but the start of the page transition. The async function would start running as soon as the click occured.

希望这更清楚一点！

推荐答案

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

So in the end I figured out a way to solve the problem I posed, and I'm providing it here in case anyone else has the same problem and is looking for a solution.

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

基本上当用户点击链接时，它会在内部防止点击实际产生任何影响，并为异步函数提供一定的时间在对行为正常的链接进行第二次点击之前，它是否正常工作。

Basically when the user clicks the link, it internally prevents that click from actually having any effect, and gives the asynchronous function a set amount of time to do it's work before doing a second click on the link which behaves normally.

这篇关于延迟点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！