我需要一个简单的去抖函数,始终为true。
不使用lodash,并借助于Can someone explain the "debounce" function in Javascript,我将其实现如下:
function debounce(func, wait) {
var timeout;
return function() {
if (!timeout) func.apply(this, arguments);
clearTimeout(timeout);
timeout = setTimeout(()=>{timeout = null}, wait);
};
};
在我需要防抖 axios 请求时,它按预期工作。假设我有一个防抖的 axios 方法,我希望调用方法像往常一样,也就是说,我的防抖 axios 方法应该返回 Promise。
//the calling method should not change
debounced_axios().then(res => {...}).catch(err => {...})
原始的防抖实现的本质是在等待时间内只运行一次函数,但我如何在等待时间内返回一个promise?
然后我想到了以下解决方案。
all_timers = {}
function debounce_axios(input, wait) {
return new Promise((resolve, reject) => {
let timer = all_timers.[input] //check if it is a repeated request, pseudo code
if (!timer) {
axios(input).then(res=>{
resolve(res)
}).catch(err => {
reject(err)
})
}
clearTimeout(timer);
timer = setTimeout(()=>{timer = null}, wait);
all_timers[input] = timer
};
};
我的debounce_axios的核心是让promise在重复请求时保持挂起状态,因此调用方法
debounced_axios().then(res => {...}).catch(err => {...})
不需要更改。这里的答案“JavaScript永久挂起的promise有副作用吗?”说“不应该有任何副作用。”
但我仍然不确定让promise永久挂起是否100%安全。
另一个问题是Promise Anti patterns建议不创建不必要的promise。但在我的情况下,创建一个新的promise似乎是必要的。
简而言之,在axios请求(或任何返回promise的请求)中有没有一种简单的方式来防抖?
.then(res => {...}).catch(err => {...})
*” 究竟是什么意思?为什么不直接将其放在创建debounced_axios
的函数内部? - Bergidebounced_axious
,但为什么不彻底防抖整个东西呢? - Bergi