节流和防抖及其应用场景...

最新推荐文章于 2024-08-22 11:09:58 发布

木_林_森

最新推荐文章于 2024-08-22 11:09:58 发布

阅读量523

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_42317878/article/details/105081972

版权

js 专栏收录该内容

29 篇文章

订阅专栏

本文深入解析函数防抖(debounce)与节流(throttle)的实现原理及应用场景，防抖用于在事件触发后延迟执行，节流则确保在单位时间内只执行一次，有效优化搜索联想、窗口调整及鼠标事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

函数防抖(debounce) :在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

function debounce(fn，delay,immediate) {
  let timer;
  
 return function (){
         const that = this;
        const _args = [...arguments];
      if (timer ){ clearTimeout(timer)}
     if (immediate && !timer) {
          fn.call(this, args);
        }

       timer= setTimeout(function(){
          fn.apply(that,_args)
       },delay)

     }

}

我们加入了防抖以后，当你在频繁的触发函数时，在单位的时间间隔内，取消原来的定时器，重新创建延迟触发.
防抖应用场景：

search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

函数节流(throttle) :在单位时间内触发，只执行一次。


function throttle(fn，wait) {
      let canRun = true; // 通过闭包保存一个标记
      return function () {
        if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
        canRun = false; // 立即设置为false
        setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
          fn.apply(this, arguments);
          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
          canRun = true;
        }, wait);
      };
    }

应用场景：
单位时间只触发一次，防止鼠标连续多次提交。
监听滚动页面，懒加载多张图片，用节流函数防止连续触发。