JS防抖和节流

JS防抖和节流

概念解析

这里先抛出防抖和节流的概念

• 防抖：在指定时间内触发，则重新计算时间(回城)，即只使用最后一次的

• 节流：在指定时间内，只响应第一次(技能CD)，即只使用第一次的

应用场景

• 防抖
  • 搜索联想时，用户不断输入，使用防抖节省资源
  • 用户滚动事件，我们希望当界面停下来时才进行一些操作
• 节流
  • 鼠标不断点击触发某事件，只在单位时间触发一次
  • 懒加载要监听计算滚动条的位置，但是不必每此滚动都触发，降低计算频率

实现

• 防抖

防抖在于每次触发前都清除一次定时器，再赋一个新的定时器

    // 简单的防抖函数
    function debounce(fun,time){
      // 定时器变量
      var timeout
      return function(){
        // 每次触发先清除原来的定时器
        clearTimeout(timeout)
        // 再创建新的定时器
        timeout = setTimeout(()=>{},time)
      }
    }
    function hi(){
      console.log('防抖');
    }
    var inp = document.querySelector('input')
    inp.addEventListener('input',debounce(hi,3000))

• 节流

节流在于设置一个节流阀，true为允许执行，false为拒绝执行

判断当前节流阀为false，则立即return出去；否则，可以执行，代表此次执行开始，将节流阀设为false，计时器结束后再设置为true（开始时立即设置为false，定时结束设置为true）

    // 节流
    // 一段时间内只执行第一次
    function throttle(fn,time){
      // 节流阀
      let timer = true
      return function(){
        // 如果节流阀为false，就不能重新计时
        if(!timer) return
        // 节流阀为true，可以重新触发，触发前先将节流阀改为false
        timer = false
        setTimeout(() => {
          // 函数体
          // 执行完毕后将节流阀修改为true
          timer = true
        }, time); 
      } 
    }

    window.addEventListener('scroll',throttle(fn,300))