防抖与节流的基本知识

防抖与节流

防抖

• 什么是防抖

  防抖是指：频繁触发某个操作时，只执行最后一次

• 防抖的应用场景

  场景：搜索框只有在输入完后，才执行查询的请求

  好处：这样可以有校减少请求次数，节省网络资源

• 核心代码：

  /*
  	技术原理
          1 用新的一次输入来清除上一次的延时器 
          2 同时开启一个新的延时器 
  
  */
  let timeId;
  const input = document.querySelector('input')
  input.addEventListener('input',(event)=>{
      // 每次触发事件时先清空上一次的延迟器
      clearTimeout(timeId)
      
      // 开启一个延迟器
      timeId = setTimeout(()=>{
          执行所需要的业务
      },1000)
  })
  

节流

• 什么是节流

  节流是指单位时间内，频繁触发同一个操作，只会触发一次

• 使用场景

  场景：移动端分页 - 倒计时按钮 等等

• 核心代码

  //开关
  let isLoadding = false
  const btn = document.querySelector('button')
  btn.addEventListener('click',()=>{
      
        // 点击按钮的时候先判断 isLoadding true还是false
        //  true 请求在发送中  return   不能执行下一次发送请求
        //  false 没有请求
        //   先设置 isLoadding true
        //   发送请求出去
        //  请求回来了  设置 isLoadding = false
      
      if(isLoadding){
          return
      }
      // 设置为true让下面业务逻辑没执行完之前，不能执行新的业务
      isLoadding = true
      //执行要执行的业务 这里以发送请求为例
      
      axios({
            method: 'get',
            url: 'http://www.itcbc.com:3006/api/getbooks' + query,
          }).then((result) => {
            console.log('数据回来了');
            //执行完之后设置开关为false，可以执行下一个业务
            isLoadding = false;
          });
  })