程序猿头头（防抖节流）

防抖节流的原理和应用

防抖：
所谓的防抖，就是指触发事件后再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))

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

//节流
// 思路：在规定时间内只触发一次
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))