如何在用户停止单击按钮后调用函数？

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 
}