面试点之防抖,节流

107 阅读1分钟

节流与防抖都是规定时间内只触发一次,区别在于节流是只响应第一次,防抖是只响应最后一次。

节流 节流是规定时间内只触发一次。 节流 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…