一,防抖和节流的特点
二者都是闭包的一种应用场景。
二,防抖
概念:规定一个事件在触发后N秒执行,但是在未到N秒时再次触发事件,就以最后一次触发为准,重新计算时间。
应用场景:比如input搜索框要实现在内容改变change时调用接口查询。
如果没有防抖,就是输入一个字符调用一次接口;使用防抖后,就定义在输入内容5秒后执行查询。
原理:类似于一个定时器,再次触发事件后,把上个定时器清除掉
function debounce (func, delay) {
var timer = null;
return function() {
var that = this;
var args = argument;
clearTimeout(timer); // 每次执行都清除之前的定时器
timer = setTimeout(() => {
func.call(that, args); // 执行传进来的函数func,且带入参数
}, delay);
}
}
三、节流
概念:在规定时间内,只能触发一次函数,多次触发则不调用。
应用场景:浏览器滚动条、点击提交按钮
原理对比:节流本质上与防抖一样,只是节流多了一个判断条件“第二次触发的时候,什么也不执行”
function throttle(func, delay) {
var timer = null;
return function() {
var that = this;
var args = argument;
if (!timer) { // 在上次定时器没有完成前,不会再次执行
timer = setTimeout(() => {
func.call(that, args);
timer = null; // 事件执行完后清除定时器
}, delay);
}
}
}