如何在用戶停止單擊按鈕後調用函數？

Question

如果我有一個在線購物平臺，我想在用戶停止點擊添加按鈕後調用我的REST API。

假設他想要10個產品，然後他開始點擊「添加」按鈕。每次用戶按下「添加」按鈕時，我都不想撥打電話。我想知道什麼時候用戶停止點擊，然後撥打我的服務器的數量= 10.

btw我正在使用Angular2。

Answer 1

添加setTimeout(backendCallback, ms)每次點擊。如果再次點擊 - 清除超時並重復。

let timer; 
let callbackDealy = 800; 

onAddClick(){ 
    clearTimeout(timer); 
    timer = setTimeout(() => { 
     this.http.get().subscribe(...); 
    }, callbackDelay); 
} 

Answer 2

您所描述的想法與去反彈相似;但這不是這種方法的典型用例。那麼，如果你真的想這樣做，我想你可以使用超時。因此，在處理程序中單擊添加，設置等待一段時間的超時，然後將請求發送到服務器。 （在設置此點擊的超時之前，請記住取消以前點擊的任何超時或全部爲零）。但是，您還必須警惕用戶在超時過期之前離開...

在角度的應用程序，爲什麼數量變化需要服務器通話呢？是否沒有像「提交訂單」那樣的用戶一旦設置了所有數量就點擊的東西？服務器是否可以調用，以便服務器可以重新計算要顯示的價格？如果是這樣，請做那個客戶端;這就是爲什麼你使用角度。

Answer 3

我不知道你能可靠地預測用戶交互的末尾以這種方式，而是放在一邊，你可以做這樣的事情：

var cancelToken; 
$("#myButton").click(() => { 
    cancelToken && clearTimeout(cancelToken); 
    cancelToken = setTimeout(() => { 
     alert("5 seconds elapsed") 
    }, 5000); 
}); 

單擊該按鈕設置一個計時器，被取消&每次點擊該按鈕時被更新。

小提琴：https://jsfiddle.net/oop5wyxL/3/

Answer 4

可以使用（點擊）事件處理程序，使用超時做呼叫。點擊完成後，您重置計數器。因此，您可以將計數器設置爲您認爲正確的時間，以確保用戶停止點擊。事情是這樣的：

HTML

<button (click)="saveBasket()"> 

JS

timer; 

saveBasket(){ 
    if (this.timer) { // RESET THE TIMER IN EVERY CLICK 
     clearTimeout(this.timer); 
     this.timer = null; 
    } 
    timer = setTimeout(callAPI(), 10000); // CALL THE API AFTER 10 SECONDS 
}