防抖和节流代码

最新推荐文章于 2025-06-22 15:45:08 发布

Williamszwk

最新推荐文章于 2025-06-22 15:45:08 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：手写源码

本文链接：https://blog.csdn.net/dazhougege/article/details/105311875

手写源码专栏收录该内容

6 篇文章

订阅专栏

本文探讨了防抖(debounce)和节流(throttle)两种优化技术，它们用于控制高频事件的处理。防抖技术确保在一段时间内的连续触发中，仅执行最后一次操作，而节流则保证在设定的时间间隔内只执行一次函数。这两种方法常用于改善用户界面性能，如滚动事件监听、窗口resize事件处理等场景。

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

防抖-debounce:当一段时间内持续触发事件，只会执行最后一次。在延迟时间内，被触发，将刷新延迟时间。

const debounce = function(fn, delay){
    let timer = null;
    return (...args)=> {
        clearTimeout(timer);	//在此触发时，会清除上次的事件。
        timer = settimeout(()=>{
            fn.apply(this,argus);//fn调用参数
        },delay);
    };
}

节流-throttle:高频次数触发，在指定时间只会执行一次

function throttle(fn,delay=500){
	let canrun = true; //可以执行
    return function(){
        if(!canrun) return ;//执行一次延迟时，就会变为false,后面的就会返回空。
        canrun = false;
        settimeout(()=>{
            fn.apply(this,arguments); //argumens相当于下例子的e,每个函数都有，而上面的防抖是箭头函数只能用 ...arg形式来接收参数。
            canrn = true;
        },500);
    };
}
 function sayHi(e) {
     console.log(e.target.innerWidth, e.target.innerHeight);
   }
  window.addEventListener('resize', throttle(sayHi));