概念和定义
函数防抖(debounce)
短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。
可能光看定义迷迷糊糊的,用通俗易懂的话来说:
比如说你的女朋友就是输入框,你想她进行表白,可能你手速很快,噼里啪啦地输入了一大堆,根本没给人家思考的机会,那你也不能要求人家你输入一个字就给你回应一次吧,这多累啊是吧~这时候呢,你就要做一些优化,让你的女朋友也就是输入框只对最后一次的输入作出反应即可,这就是函数防抖(debounce).
那么有人就要问了,防抖的实现关键在于什么呢?
其实实现的方法很简单,无非就是将你的表白延迟发送(也就是设置一个定时器),最后汇总到一起统一表白即可~
废话不多说,上代码!
function confession(content) {
console.log(`XXX,这是我想对你说的话${content}`);
}
function debounceCurry(fn, delay) {
return function (...args) {
clearTimeout(fn._timer);
fn._timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
const debounce = debounceCurry(ajax, 1000);
ipt.addEventListener('input',function(e){
debounce(e.target.value)
})
说完了函数防抖,再来谈谈函数节流~
函数节流(throttle)
指连续触发事件但是在 n 秒中只执行一次函数。即 2n 秒内执行 2 次... 。节流如字面意思，会稀释函数的执行频率。
还是老样子,光看定义实在太无聊了,咱讲点阳间人能听懂的吧~
怎么说呢,现在输入框很可能已经成为你女朋友了(假设你debouce告白的时候已经成功了,人嘛~总得有点信心才好). 那现在我们又面临了一个问题了,既然输入框已经成为我们女朋友了,我们就希望她能时刻对我们的求爱作出反应(毕竟谈恋爱是双方的事情,你来我往才有结果不是嘛~),但我们作为一个优质的男朋友,又不希望女朋友受累,那我们呢只希望说在一小时内女朋友能回我们一条信息我们就很满足了,这时候呢,就要用到函数节流了(throttle)
再来讲下函数节流实现的思路吧
其实就是判断定时器是否存在,如果存在不做任何处理,静静等待女朋友的回应即可,如果不存在那么你就需要告诉女朋友得给我一个回应啦,然后在回应结束后再清楚定时器即可
废话不多说,上代码!
function confession(content) {
console.log(`xxx,这是我想对你说的话${content}`);
}
function throttleCurry(fn, delay) {
let _timer;
return function (...args) {
if (_timer) {
return;
}
_timer = setTimeout(() => {
fn.apply(this, args);
_timer = null
}, delay);
};
}
const throttle = throttleCurry(confession, 1000);
ipt.addEventListener("input", function (e) {
throttle(e.target.value);
});
函数防抖和节流的应用场景
- debounce
- 函数防抖主要用来模糊查询匹配上,通过函数防抖来节省资源,优化性能
- 还可以用于在window触发resize时,用防抖来减少资源损耗
- throttle
- 函数节流主要用于阻止用户的多次点击,在一定时间内只响应一次请求
- 还有就是监听滚轮事件,也是在规定时间内只需触发一次即可
总结
- 仔细阅读函数防抖和节流的代码,你会发现其实两者实现的思路差异主要在于对定时器的处理
- 函数防抖是通过检查定时器是否存在,如果存在就重新设置定时器的任务,最后做到只执行最后一次定时器的任务
- 函数节流是通过检查定时器是否存在,如果存在就不做任何处理,如果不存在那就设置一个定时器任务,并在最后清除定时器
最后
校招准备不易,希望大家都能拿到心仪的offer~
