11

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

$('#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 链接的支持。

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

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

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

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

希望这更清楚一点！

4

4 回答 4

14

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

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

基本上，当用户单击链接时，它会在内部阻止该单击实际产生任何影响，并在第二次单击行为正常的链接之前给异步函数一定的时间来完成它的工作。

于 2013-07-22T23:41:47.450 回答
1

setTimeout允许您将运行代码延迟多少毫秒

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");
});
于 2013-07-17T02:50:00.720 回答
0

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

你会这样称呼它：

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

但我不得不想知道为什么你需要这样做。您要解决的问题是什么？通常延迟事情并不能真正解决任何问题。

于 2013-07-17T02:46:45.057 回答
-1

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而不是complete，您延迟导航的动机似乎是因为您有一堆异步的东西在进行，并且您想在导航到该页面之前确保所有的 ajax 东西都是完整的。

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

于 2013-07-17T03:30:14.203 回答