防抖和节流的思想与实现逻辑

最新推荐文章于 2025-10-29 20:16:36 发布

原创最新推荐文章于 2025-10-29 20:16:36 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

19 篇文章

订阅专栏

本文深入探讨了JavaScript中的两种性能优化技术——防抖(debounce)和节流(throttle)。防抖用于限制函数的频繁执行，例如在用户连续输入时，确保最后一次操作后才执行函数。节流则是在一定时间内只执行一次函数，适用于如滚动事件等场景，防止事件被连续触发。通过示例代码，阐述了防抖和节流的工作原理及其在实际应用中的实现。

防抖节流

节流的思想就像现实世界游戏里的人物触发大招后等待几秒后才能再次执行

防止用户连续事件

//函数节流
var r = function () {
  console.log("薇恩开启大招 一秒隐身 进入夜行  收割时刻");
};
function lolHeroskill(fn, delay) {
  let cd = true;
  return function () {
    if (cd) {
      fn();
      cd = false;
      setTimeout(() => {
        cd = true;
      }, delay);
    } else {
        console.log('我进来else里面了')
    }
  };
}
const use = lolHeroskill(r, 3000);
use();
use();
use();
use();
use();
use();
use();

防抖像是一群人上公交的过程连续执行会触发事件直到最后一次触发后才执行
执行用户连续事件

//防抖 
function shuaka(fn, delay){
    let timerId = null
    return function(){
        if(timerId){window.clearTimeout(timerId)}
        timerId = setTimeout(()=>{
            fn()
            timerId = null
        },delay)
    }
}
const startshuaka = shuaka(()=>console.log('最后一个人上车了 公交可以开了'),5000)

startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()