防抖
是指连续触发事件但是在设定的一段时间中只执行最后一次
例如:设定1000毫秒执行,当你触发事件了,他会1000毫秒后执行,但是在还剩500毫米的时候你又触发了事件,那就会重新开始1000毫秒后再执行
记忆核心:从新开始
应用场景:搜索框搜索输入
代码实现 (定时器)
实现思路:检查定时器是否为null,如果不为null就说明计时没结束又触发了事件,就清除定时器。然后重新开始计时,每次触发前先清掉以前的定时器
function debounce(func, wait) {
let timeout;
return function () {
let context = this; // 保存this指向
let args = arguments; // 拿到event对象
clearTimeout(timeout)
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
节流
是指连续触发事件但是在设定的一段时间中只执行一次函数
例如:设定1000毫秒执行,那你在1000毫秒内触发多次,也只在1000毫秒后执行一次
记忆核心:不要打断我
应用场景:高频事件,下拉加载,视频播放记录时间等
代码实现 (定时器)
实现思路:检查定时器是否为null,如果不为null就说明计时没结束又触发了事件,那么直接return出去,如果为null就继续往下走执行定时器,并在定时器执行完后重新给定时器赋值为null
function throttled2(fn, delay = 500) {
let timer = null
return function (...args) {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args)
timer = null
}, delay);
}
}
}