如何延迟函数执行

Question

我有这种情况，我正在构建一个购物车，每次添加产品或更改数量时都需要发出http请求。

我有一个按钮可以将 1 个单位的产品添加到购物车，它假设添加的每个单位都应该发出 http 请求，但我想避免一次打很多电话......所以我想设置请求超时，但如果在 3 秒内用户再次点击，那么我应该取消使用旧数据的最后一个请求，然后为使用新数据的请求设置新的超时。

所以我想出了这个解决方案

function doRequest(){
  clearTimeout(state.request);
  state.request = setTimeout(updateCartService, 180);      
}

该函数位于另一个函数内部，该函数检索 state 对象（变量和数据的集合，在所有应用程序中持久存在）。 updateCarteService 函数包含 http 请求。

但是所有请求仍在进行中，如果我点击 5 次触发 doRequest 的按钮，我将执行 5 次调用。

对可能出现的问题或可能有更好的方法来实现我的目标有任何想法吗？

如果有帮助，我正在使用 vueJs、vuex (flux) 构建网站，并且此代码在操作中。

Answer 1

setTimeout 需要毫秒，所以你设置 timout 为 180ms，太短了，比如 3000。这是一个小的 jsfiddle 示例。

https://jsfiddle.net/ShinShil/5fw2c63o/

var timeout;
$('#click').click(function() {
    clearTimeout(timeout);
  timeout = setTimeout(setText, 3000);
});

function setText() {
    $('#text').append('text');
}