ajax 防抖和节流

326 阅读1分钟

防抖

<button>按钮</button>
  <script>
    // 防抖:频繁触发某个操作时,只执行最后一次
    // 定时器的名称必须是全局变量,这样,进入事件里面,才能清除上一次的定时器
    let timer;
    // 获取元素绑定事件
    document.querySelector('button').onclick=function(){
      // 取消之前的延时器
      clearTimeout(timer)
      // 利用定时器触发
      timer=setTimeout(function(){
        console.log('叫哥哥')
      },5000)
    }
  </script>

节流

  <button>按钮</button>
  <script>
    // 节流(throttle)指的数:单位时间内,频繁触发同一个操作,只会触发1次
    // 思路:开关思想
    // 获取元素,绑定事件 
    let bol=true
    if(bol){

    }
    document.querySelector('button').onclick=function(){
      
      // 在设置false之前 先判断,是否是第一次点击
      if(bol==false){
        return
      }
      console.log('叫哥哥')
      // 只要有人点击就立刻改为false
      bol=false
      // 利用延时器实现节流
      setTimeout(function(){
        // 延时器 ajax接收完成只会把boo改为true
        bol=true
      },2000)
    }
  </script>