JavaScript中防抖和节流的区别及适用场景是什么

这篇文章主要介绍“JavaScript中防抖和节流的区别及适用场景是什么”，在日常操作中，相信很多人在JavaScript中防抖和节流的区别及适用场景是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript中防抖和节流的区别及适用场景是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

防抖

防抖是什么呢？

形象的的说就是：防止抖动（防抖函数内心独白：“你就抖动吧！等你不抖动了，我们在进行下一步”）

例如

一个搜索输入框， 用户不停的进行输入（这个时候就是抖动的过程）， 等用户输入停止之后，再触发搜索。

代码演示

function debounce(fn, delay = 200) {
  let timer = 0
  return function() {
    // 如果这个函数已经被触发了
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments); // 透传 this和参数
      timer = 0
    },delay)
  }
}

节流

节流：节省交互沟通。

形象的的说就是：no！no！no！一个一个来，按照时间节奏来！插队禁止！

例如

drag（拖动）事件或者 scroll（滚动） 期间触发某个毁掉，要设置一个时间间隔。这时候就不能使用防抖了，为什么呢？

防抖是拖拽或者滚动结束之后才返回回调，但是我是需要在过程中进行触发回调，但是又不需要那么的频繁；这时候就使用节流函数，每隔一定的时间进项触发就好了！

代码演示

// 节流函数
function throttle(fn, delay = 200) {
  let  timer = 0
  return function () {
    if(timer){
      return
    }
    timer.setTimeout(() =>{
      fn.apply(this, arguments); // 透传 this和参数
      timer = 0
    },delay)
  }
}

咋一看，怎么和防抖函数好像怎么这么像？

区别仅仅在：

防抖：

 if(timer){
  clearTimeout(timer)
}

节流：

if(timer){
  return
}

他们在定时器已经有任务的时候的操作的不同。在我们上面介绍了防抖和节流的概念之后，大家应该都懂了。

防抖函数在每一次都有内容后进行清除是为了保证当前执行的函数就是当前规定的时间内执行的最后一次操作

 if(timer){
  clearTimeout(timer)
}

节流函数如此操作是为了保证，在规定的时间内只会执行一次这个操作，这就是两个函数从代码上看到的不同

if(timer){
  return
}

到此，关于“JavaScript中防抖和节流的区别及适用场景是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！