防抖:指事件触发执行事件处理程序时,在N秒内该事件不触发,则执行事件处理程序;在N秒内该事件被触发,则从触发时间开始延时N秒再执行。
用setTimeout实现函数防抖
var time = null
window.addEventListener('resize', function () {
clearTimeout(time)
time = setTimeout(() => {
console.log('size改变') // 事件处理程序代码块
}, 1000);
})
函数防抖的关键点在于清除定时器的时机,只要事件被触发,就清除上一个定时器。
节流:指事件触发执行事件处理程序时,持续不断触发事件,而事件处理程序在N秒内只执行一次。
用setTimeout实现函数节流
var times = 'opean'
window.addEventListener('mousemove', function () {
if (times === 'opean') {
times = setTimeout(() => { // 这里的time赋值,就相当于是close。
console.log('按钮1秒钟反馈一次') // 事件处理程序代码块
times = 'opean'
}, 1000);
}
})
函数节流的关键点在于给执行事件一个开关,事件执行时就关闭这个开关,事件执行完就打开这个开关。