如何延迟函数执行

Question

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

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

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

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

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

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

是否知道可能出现的问题或实现我的目标的更好方法？

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

Answer 1

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

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

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

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

如何延迟函数执行

How to delay a function excecution

javascript

http

timer

flux

vue.js