延遲點擊事件

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

window.setTimeout將在指定的延遲後執行任何給定的功能。

你會這樣稱呼它：

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

但是我想知道爲什麼你需要做到這一點。你想解決什麼問題？通常拖延的東西並不能真正解決任何問題。

Answer 3

嘗試setTimeout

$('#someElement').on('click', 'a', function(event) { 
    var duration = 1000; 
    setTimeout(function() { 
     // Code for click event 
     // this code will run after the duration elaspes 
    }, duration); 

    someAsynchronousFunction(); 
}); 

但如果它是你所談論的是異步函數，也不能保證這個函數將完成在指定的時間內執行。

最好的辦法是在Asyn方法的回調函數上執行該函數。

Answer 4

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

Answer 5

你落入最古老的陷阱中JavaScript的：延緩它的異步函數調用之後將執行的希望的東西已經完成。

不要這樣做：使用回調或promise。無論您做多少測試，您都無法知道someAsynchronousFunction();通話需要多長時間。

不知道的功能可按是什麼，很難提出一個答案，但看一看jQuery's .done()

Answer 6

我已經添加了「標誌」，以@舒尚特代碼：

的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 7

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/（一個非常有用的文檔頁）。