如何覆盖或刷新 javascript setTimeout

Question

我需要刷新或覆盖setTimeout延迟值。我有一个产品数量更新按钮：

<q-input class="q-pb-none" v-model="quantity" dense borderless style="width: 25px" mask="###" @input="updateQty" />
<div class="col-auto">
          <div class="row"><q-icon name="keyboard_arrow_up" @click="quantity++" class="cursor-pointer"/></div>
          <div class="row"><q-icon name="keyboard_arrow_down" @click="quantity--" class="cursor-pointer"/></div>
        </div>

我不想在每次点击数量更改按钮时发出更新请求，而不是下面的 updateQty 函数应该运行 3 秒后用户放弃点击按钮。

updateQty () {
// I need to refresh this timeout at evertime this function called.
      window.setTimeout(() => {
        this.$store.dispatch('pack/updateProductQty')
      }, 3000)
    }

我该如何设置这个逻辑？我使用 quasar vue.js 框架。谢谢..

Answer 1

您可以将超时 ID 设置为变量并在每次点击时清除超时：

let timeoutId;

updateQty () {
    if (timeoutId) {
        clearTimeout(timeoutId);
    }
    timeoutId = window.setTimeout(() => {
        this.$store.dispatch('pack/updateProductQty')
    }, 3000)
}

恕我直言，更简洁的解决方案是使用 Observables 或类似技术。

如何覆盖或刷新 javascript setTimeout

How to Overwrite or Refresh javascript setTimeout

javascript

refresh

settimeout