函数节流
说明:在规定的时间内,第一执行函数生效,后面的不生效,只有大于设定的时间才执行下一次。
用途:一般用于一个需要频繁触发的函数,出于优化性能的考虑,只让函数触发的第一次生效,在等待的时间内函数不生效,当超过等待的时间才开始下一次的执行。一般用于滚轮加载,频繁请求网络等
代码片段
(```
// 节流函数
// fn为需要传入的函数,delay为设定的时间
function throttle(fn, delay) {
// 记录上一次刚执行完函数后的时间
let lastTime = 0;
// 返回一个函数,形成闭包,保存lastTime的变量
return function() {
// 记录当前时间
let nowTime = Date.now();
// 判断当前的时间减去上一次执行完函数后的时间,是否超过设定的时间
if(nowTime - lastTime > delay) {
// 改变this的指向
fn.call(this)
保存上次执行完函数后的时间
lastTime = nowTime;
}
}
}
```)
注意:这里使用call改变this的指向,是因为函数内又嵌套了一个函数,该函数的this指向的是window,使用call能让该函数指向调用它的对象
函数防抖
说明:在设定的时间内执行该函数,如果设定执行函数的时间内又触发一次,就会取消上一次的执行,直到最后一次时间内超过设定的时间才执行该函数
使用:一个频繁触发的函数,出于性能的优化,只让该函数在设定的时间内最后一次执行,前面在未超过的时间内函数无法生效。一般用于频繁的点击事件或者搜索框输入等
代码片段:
(```
// 防抖函数
function debounce(fn, delay) {
// 保存定时器的变量
let timer = null;
return function (...res) {
// 清除上一次开启的定时器
if(timer) clearTimeout(timer);
// 开启定时器
timer = setTimeout(function () {
fn.apply(this, res)
}, delay)
}
}
```)
两者之间的区别:函数节流是指在第一次就会先触发一次,而函数防抖是指在最后一次才触发,两者都是为了解决函数的频繁触发,提高性能优化。