节流、防抖

节流、防抖

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

节流和防抖函数的区别：
​ 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。在页面的无需加载场景下，我们需要用户在滚动页面时，每隔一段事件发一次AJAX请求，而不是在用户停止滚动页面操作才去请求数据。这种就需要节流来实现。