JS工具类函数之函数防抖与节流

最新推荐文章于 2024-09-24 23:10:31 发布

June_Soda

最新推荐文章于 2024-09-24 23:10:31 发布

阅读量199

点赞数

分类专栏： JS工具函数文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_37155582/article/details/110173519

版权

本文介绍了JavaScript中的函数防抖与节流技术，常用于处理频繁触发的事件，如window.resize、window.scroll等。函数防抖通过限制执行次数来优化性能，而函数节流则控制执行频率。文章详细讲解了两种技术的实现原理，并给出了具体的代码示例，适用于实时搜索、拖拽等场景。

摘要由CSDN通过智能技术生成

在开发中，遇到一些频繁触发的事件，如window.onresize,window.onmousemove，window.onscroll等，或是实时输入模糊搜索需要不断向服务器发送数据的类场景，一般都会用到函数防抖与节流。那么，什么是函数防抖与节流呢？

1.函数防抖

函数防抖：触发事件后n秒后事件再开始执行，如果在n秒内再次触发则重新计算。函数需要频繁触发时，只有足够空闲的时候，才会执行一次。好像公交司机会等人都上车后才会开车一样.。
应用场景：实时搜索，拖拽等。
实现原理：第一次调用函数时，创建一个定时器，然后在指定时间之后再调用该函数。实现分为以下两个版本

以下版本延迟执行，比如第一次输入文字查询时，第一次就要延迟对应毫秒数才会执行。

function debounce1(func, delay=1000) {
   let timer = null; //记录定时器
   return function(){
      if(timer) clearTimeout(timer); //清除上一次的定时器
      let _this = this;
      let args = [].slice.apply(arguments);
      timer = setTimeout(function(){
          func.apply(_this, args );  
        }, delay);
   };
}