防抖与节流

防抖：所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

节流：所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。两种方式可以实现，分别是时间戳版和定时器版。

//防抖

// 思路:在规定时间内未触发第二次，则执行 function debounce (fn, delay) { // 利用闭包保存定时器 let timer = null return function () { let context = this let arg = arguments // 在规定时间内再次触发会先清除定时器后再重设定时器 clearTimeout(timer) timer = setTimeout(function () { fn.apply(context, arg) }, delay) } } function fn () { console.log('防抖') } addEventListener('scroll', debounce(fn, 1000))

//节流

// 思路：在规定时间内只触发一次 function throttle (fn, delay) { // 利用闭包保存时间 let prev = Date.now() return function () { let context = this let arg = arguments let now = Date.now() if (now - prev >= delay) { fn.apply(context, arg) prev = Date.now() } } } function fn () { console.log('节流') } addEventListener('scroll', throttle(fn, 1000))