节流和防抖

• 实现一个节流函数

  规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

  • 鼠标不断点击触发，mousedown(单位时间内只触发一次)
  • 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

  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)) 
  

• 实现一个防抖函数

  在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

  • search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
  • window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

  // 思路:在规定时间内未触发第二次，则执行
  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))