防抖(debounce)与节流(throttle)

导语

在开发过程中,有没有遇到过以下几种业务操作情况:

情况一:提交按钮重复点击,用户输入框搜索; 

情况二:监听页面滚动,监听鼠标移动等

如果遇到上情况, 那就需要我们做一些优化了

防抖(debounce)

如提交按钮防止重复点击,或用户编辑输入框 OnChange 事件进行数据请求操作;(如果用此高频的情况去调用接口,后端估计会拿着搬砖向你走来 .哈哈哈!!!) 其中心思为: 如果在指定间隔事件内重复触发,会清空状态只有在超过设定的间隔时间才会触发 废话不多说先上图

如图:只有在点击后得一秒会触发 自定义的方法 ,本例子中 定义的是1秒;

代码如下

 let btn = document.getElementById('btn')

  btn.addEventListener('click',debounce(clickFn))

  function debounce(fn){
    let time = null; //定义初始值 
    return function(...args){
      clearTimeout(time) //每次当有触发 就清空状态
      time = setTimeout(()=>{  
        fn.apply(this,args) //  执行 传入函数
      },1000)
    }
  } 

  function clickFn(){
    console.log('点我呀')
  }

节流(throttle)

如监听鼠标滑动事件及 监听页面滚动事件;其中思想为在指定的间隔时间中只触发一次

上图:

代码如下:

  window.addEventListener('scroll',throttle(scrollFn))

  function throttle(fn){
    let run = true; //定义初始值

    return function(...args){
      if(!run){  //状态改变 直接返回 
        return
      }


      run = false // 更改状态
      setTimeout(()=>{
        fn.apply(this,args);  //  执行 传入函数
        run = true //重新 初始数据  
      },1000)
    }
  }

  function scrollFn(){
    console.log('看我一秒打印一次')
  }

结语

防抖(debounce)与节流(throttle) 在前端项目优化中,也占据一席之位; 此次的分享就到这里,如果有帮助到你的话,请不要吝啬你的赞; 哈哈哈!!!

前端界的一枚小学生!!!