当前位置: 首页 > Web前端 > HTML

关于js节流功能throttle和防抖debounce

时间:2023-04-02 16:04:28 HTML

废话不多说,直入正题。什么是油门和去抖动?这两种方法的主要目的多半是为了性能优化。最常见的应用是监听resize、scroll、mouseover等事件时的性能消耗。以scroll为例,如果不处理滑动一次滚动条,就会触发多次scroll事件。如果涉及的代码很重,那么性能消耗一定非常大。使用节流和防抖就是为了优化这种情况。使用的对象由相同的使用场景决定。接下来比较两者的区别。Throttle在指定的延迟时间(延迟时间)内的延迟间隔内被多次调用,throttle会丢弃中间的所有调用,直到用户停止行为后的延迟时间后执行预期的执行函数。这称为功能节流。Debounce与节流功能相同。如果debounce在设置的延迟间隔内多次调用执行函数,这些操作将被丢弃。与throttle不同的是debounce多了一个强制执行时间参数mustRunDelay。不管之前丢弃了多少次操作,一旦时间标记>=mustRunDelay,执行函数就会被调用一次。接下来,代码更直观。原文是指源代码。原文中关于节流和防抖的描述有待商榷,但最终的代码其实是节流和防抖的结合。以是否传入mustRunDelay参数来区分。functionthrottle(fn,delay,mustRunDelay=0){让计时器=null;让我们开始;//创建父作用域时间标签returnfunction(){constcontext=this;常量参数=参数;consttCurr=+newDate();//分作用域时间标签clearTimeout(timer);//每次执行,先清除定时器,这一步是在延时时间内丢弃冗余操作的实现if(!tStart){//第一次给时间标签赋值tStart=tCurr;}//这一层判断是判断是否满足强制执行条件if(mustRunDelay!==0&&tCurr-tStart>=mustRunDelay){fn.apply(context,args);tStart=tCurr;}else{timer=setTimeout(function(){fn.apply(context,args);},delay);}};}忽略throttle的方法名,也可以根据调用方法debounce。主要实现是利用异步操作的事件间隔来比较前后两个调用方法的时间标签,利用清除定时器的操作实现冗余调用操作的丢弃。还有一点就是利用闭包机制,方便对tStart变量的管理。因为闭包,tStart内存不会被回收,否则需要全局定义该变量。具体如何使用结尾,以滚动事件为例:window.addEventListenr('scroll',throttle(scrollHandle,delay,mustRunDelay),false);大概意思就是,根据场景使用的时候,必须RunDelay>0?防抖:节流。