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

您可以使用（单击）事件处理程序并使用超时来执行调用。单击完成后，您将重置计数器。因此，您可以将计数器设置为您认为正确的时间，以确保用户停止点击。像这样：

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
}

Answer 3

你所描述的想法类似于去抖动;但这并不是这种方法的典型用例。

好吧，如果你真的想这样做，我想你可以使用超时。因此，在单击Add的处理程序中，设置等待很短时间的超时，然后将请求发送到服务器。（在设置此次点击的超时之前，请记住取消之前点击的所有超时，否则一切都没有。）但是，您还必须注意在超时到期之前导航的用户...

在角度应用程序中，为什么数量变化需要服务器调用呢？是不是有像＃34;提交订单＆＃34;一旦设置了所有数量，用户将单击？服务器是否只是调用服务器可以重新计算要显示的价格？如果是这样，做那个客户端;这就是你使用棱角分裂的原因。

Answer 4

我不确定您是否能够以这种方式可靠地预测用户交互的结束，但除此之外，您可以执行以下操作：

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

单击该按钮可设置已取消的计时器＆amp;每次单击按钮时都会更新。

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

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

4 个答案: