和大家探讨一下防抖与节流

今天下班,看了一段有关防抖与节流的视频,下面就是我看完后的总结,希望可以和大家一起探讨一下

1.函数防抖

• 防抖:在单位时间内,频繁的触发一个事件,以最后一次为准

• 应用场景:一般用在input输入框和button按钮

• 操作流程如下:

    1.声明一个全局变量存储定时器ID
    2.每次触发事件,先清除上一次的定时器,然后把本次事件处理代码放入定时器中
    代码如下:
    let timeID = null
    //输入框输入事件
    document.querySelector('input').oninput = function(){            
        //1.先清除之前的定时器
        clearTimeout(timeID)
        //2.开启本次定时器
        timeID = setTimeout(()=>{
            //function函数： this->window
            //箭头函数  this->上级this 表单
            console.log(`发送ajax,搜索内容是${this.value}`)
        },500) 
    }
  

2.函数节流

• 节流:在单位时间内,频繁的触发一个事件,只执行一次

• 应用场景:一般解决高频事件,比如滚动条事件,button按钮的高频点击 下面分别以滚动条事件和button按钮事件为例用代码演示

   滚动条事件:
   //声明一个全局变量存储触发时间
   let lastTime = null
   window.onscroll = function(){
       //1.每一次触发，先获取本次时间戳
       let currentTime = Date.now()
       //2.判断当前时间 与 上一次触发时间 是否超过间隔
       if( currentTime - lastTime >= 500 ){
           console.log( document.documentElement.scrollTop)
           //3.存储本次触发时间
           lastTime = currentTime
       }  
   }
   
   
   
   button按钮:(开关思想)
   //先声明一个变量存储布尔值true
   let bol = true
   //注册按钮点击事件
   document.querySelector('button').onclick = function () {
    //判断布尔值是否为false,如是则直接返回
     if (bol == false) {
      return
     }
    //将布尔值改为false
    bol = false
    //开启本次定时器
    timeID = setTimeout(() => {        
     console.log('发送Ajax');
     //在一段时间间隔后让布尔值为true
     bol = true
    }, 1000)
  }