节流与防抖都是规定时间内只触发一次,区别在于节流是只响应第一次,防抖是只响应最后一次。
节流 节流是规定时间内只触发一次。 节流 1.定时器。 定义一个定时器,然后判断是否有定时器,如果没有定时器,就定义一个定时器,delay时间后触发。 如果有定时器,就不触发函数。
function thrrotle2(func, delay) {
let timer = null;
return function () {
if (!timer) {
func()
timer = setTimeout(() => {
timer = null
}, 500)
} else {
console.log('上一个定时器尚未完成')
}
}
}
关注点: 1:传递参数:func,delay 2.返回一个函数。return function(){}
防抖
function debonce(func, delay) {
var timeout;
return function () {
clearTimeout(timeout)
timeout = setTimeout(() => { func() }, delay)
}
}
function resize() {
console.log(['窗口大小改变了'])
}
window.addEventListener('resize', debonce(resize, 500))
关注点: cleartimeout, 先清空定时器,然后设置一个执行func新的定时器。
转载来自于 juejin.cn/post/696294…