javascript - 在运行功能之前添加按钮单击时间限制，以防多次单击按钮

Question

我有一个按钮可以切换对象的“状态”值

1, 2, 3, 4

每次用户单击时，它都会循环到下一个值，然后返回到开始处。每次单击，它还会将更新的值发送到数据库。为了限制这些请求，我想添加一个缓冲区窗口，用户可以在其中快速循环，并且只有当他们停止例如 2 秒时，它才会执行发送更新值请求的功能。

当前代码HTML

<button v-on:click="changeStatus(item)">Status</button>

JavaScript

changeStatus: function (item) {

    if (item.status < 4) {
        item.status++;
    } else {
        item.status = 1;
    }
// Add some delay buffer here
     this.updateDatabase(item);
 },

使用VueJS，但基本思想应该还是一样的。

Answer 1

使用setTimeout设置计时器:

var updateTimer; // Global

...

changeStatus: function (item) {
  ...

  clearTimeout(updateTimer); // Unset previous timer, if any
  updateTimer = setTimeout(updateItem, 2000);
}

updateItem: function() {
  this.updateDatabase(item);
}