防抖、节流

防抖：

• 防抖，就是指触发事件后在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))