记录下函数节流和防抖,以前写后端的时候从来不知道还有这个说法,但是在前端好像应用的很多
函数节流
限制函数在一段时间内只能执行一次
适用情景:
1、高频点击表单提交
2、滚动条问题等(滚动加载更多,判断滚动高度)
3、搜索栏搜索关键字提示
代码实现:
// 第一种通过判断时间间隔实现
throttle(fn, interval) {
let lastTime = 0;
return function () {
const currentTime = +new Date();
if (currentTime - lastTime > interval) {
fn.apply(this, arguments);
lastTime = currentTime;
}
};
}
// 第二种通过标记判断
throttle(fn, interval) {
let canRun = true;
return function () {
if (!canRun) {
return;
}
canRun = false;
setTimeout(function () {
fn.apply(this, arguments);
canRun = true;
}, interval);
};
}
函数防抖
触发事件之后n秒内,函数只能执行一次,如果在n秒内事件再次触发,会重新计算函数执行时间
简单来说就是一个函数一直触发,但是只会执行最后一次
适用场景:
1、文本框输入监听(判断用户名是否被占用,判断输入值是否合法等等),比丢失焦点判断友好的多
代码实现:
// 在设置好的时间内,每当函数被触发时,就清除前一个设置的定时器。
debounce(func, wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}
}