防抖与节流的使用

先来说说什么是防抖和节流

防抖: 频繁触发某个操作,只执行最后一次

节流: 单位时间内,频繁触发同一操作,只执行一次

作用:减少逻辑执行的次数

好处:这样可以有效减少请求次数,节约网络资源

防抖演示

 // 防抖:频繁触发某个操作,只执行最后一次
    // 定时器的名称必须是全局变量,这样 进入事件里面才能清除上一次定时器
    let timer
    //先声明全局变量 后赋值 再点击则会清除 赋值的定时器,然后重新赋值
    // 获取元素 绑定事件
    document.querySelector('button').onclick =
      function () {
        // 取消之前定时器
        clearTimeout(timer)
        // 利用定时器触发
        timer = setTimeout(function () {
          console.log('发送ajax...')
        }, 500)
      }

节流演示

// 节流值得是:单位时间内,频繁触发同一个事件 只触发一次
    // 开关思路
    let bool = true
    // 获取元素 绑定事件
    document.querySelector('button').onclick =
      function () {
        // 在设置false之前,先判断,是否是第一次
        if (bool == false) {
          return
        }
        // 只要有人惦记就立刻改为false
        bool = false
        // 利用定时器触发
        timer = setTimeout(function () {
          console.log('发送ajax...')
          // 延时器.ajax接收完成.之后吧bool改成true
          bool = true
        }, 2000)

      }