js的防抖和节流是什么意思(前端防抖和节流的区别)

 分类:js知识时间:2022-08-01点击:

js的防抖和节流是什么意思?scroll 事件本身会触发页面的重新渲染,同时 scroll 事件的 handler 又会被高频度的触发, 因此事件的 handler 内部不应该有复杂操作,例如 DOM 操作就不应该放在事件处理中。 针对此类高频度触发事件问题(例如页面 scroll ,屏幕 resize,监听用户输入等),有两种常用的解决方法,防抖和节流。

前端基础面试:什么是防抖和节流?二者有什么区别?实际应用场景


防抖(Debouncing)实现

典型例子:限制 鼠标连击 触发。

一个比较好的解释是:

当一次事件发生后,事件处理器要等一定阈值的时间,如果这段时间过去后 再也没有 事件发生,就处理最后一次发生的事件。假设还差 0.01 秒就到达指定时间,这时又来了一个事件,那么之前的等待作废,需要重新再等待指定时间。

前端基础面试:什么是防抖和节流?二者有什么区别?实际应用场景


防抖动函数:

function debounce(fn,wait=50,immediate) {
 let timer;
 return function() {
 if(immediate) {
 fn.apply(this,arguments)
 }
 if(timer) clearTimeout(timer)
 timer = setTimeout(()=> {
 fn.apply(this,arguments)
 },wait)
 }
}

前端基础面试:什么是防抖和节流?二者有什么区别?实际应用场景


结合实例:滚动防抖

// 简单的防抖动函数
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
 console.log("Success");
}
// 采用了防抖动
window.addEventListener('scroll',debounce(realFunc,500));
// 没采用防抖动
window.addEventListener('scroll',realFunc);

前端基础面试:什么是防抖和节流?二者有什么区别?实际应用场景


一个简单的案例:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title></title>
 <style type="text/css">
 div {
 width: 200px;
 height: 300px;
 background: red;
 overflow: auto
 }
 </style>
</head>
<body>
 <div id="container">scroll 事件本身会触发页面的重新渲染,
 同时 scroll 事件的 handler 又会被高频度的触发, 
因此事件的 handler 内部不应该有复杂操作,例如 DOM 操作就不应该放在事件处理中。 针对此类高频度触发事件问题(例如页面 scroll ,屏幕 resize,
监听用户输入等),有两种常用的解决方法,防抖和节流。</div>
 <script type="text/javascript">
 // 将会包装事件的 debounce 函数
 function debounce(fn, delay) {
 // 维护一个 timer
 let timer = null;
 return function() {
 // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
 let context = this;
 let args = arguments;
 clearTimeout(timer);
 timer = setTimeout(function() {
 fn.apply(context, args);
 }, delay);
 }
 };
 // 当用户滚动时被调用的函数
 function foo() {
 console.log('你刚才拖拽了滚动条!!!');
 }
 // 在 debounce 中包装我们的函数,过 2 秒触发一次
 let elem = document.getElementById('container');
 console.log('滚动停止后等待两秒钟')
 elem.addEventListener('scroll', debounce(foo, 2000));
 </script>
</body>
</html>

前端基础面试:什么是防抖和节流?二者有什么区别?实际应用场景


前端基础面试:什么是防抖和节流?二者有什么区别?实际应用场景


节流(Throttling)实现

节流是另一种处理类似问题的解决方法。

节流函数允许一个函数在规定的时间内只执行一次。

前端基础面试:什么是防抖和节流?二者有什么区别?实际应用场景


它和防抖动最大的区别就是,节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。

比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流阀技术来实现。

主要有两种实现方法:

1.时间戳

2.定时器

时间戳:

var throttle = function(func, delay) {
 var prev = Date.now();
 return function() {
 var context = this;
 var args = arguments;
 var now = Date.now();
 if (now - prev >= delay) {
 func.apply(context, args);
 prev = Date.now();
 }
 }
}

前端基础面试:什么是防抖和节流?二者有什么区别?实际应用场景


当高频事件触发时,第一次应该会立即执行(给事件绑定函数与真正触发事件的间隔如果大于delay的话),而后再怎么频繁触发事件,也都是会每delay秒才执行一次。而当最后一次事件触发完毕后,事件也不会再被执行了。

定时器实现:

当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行;直到delay秒后,定时器执行执行函数,清空定时器,这样就可以设置下个定时器。

var throttle = fucntion(func,delay){
 var timer = null;
 return funtion(){
 var context = this;
 var args = arguments;
 if(!timer){
 timer = setTimeout(function(){
 func.apply(context,args);
 timer = null;
 },delay);
 }
 }
}

前端基础面试:什么是防抖和节流?二者有什么区别?实际应用场景


当第一次触发事件时,肯定不会立即执行函数,而是在delay秒后才执行。 之后连续不断触发事件,也会每delay秒执行一次。 当最后一次停止触发后,由于定时器的delay延迟,可能还会执行一次函数。

可以综合使用时间戳与定时器,完成一个事件触发时立即执行,触发完毕还能执行一次的节流函数:

var throttle = function(func, delay) {
 var timer = null;
 var startTime = Date.now();
 return function() {
 var curTime = Date.now();
 var remaining = delay - (curTime - startTime);
 var context = this;
 var args = arguments;
 clearTimeout(timer);
 if (remaining <= 0) {
 func.apply(context, args);
 startTime = Date.now();
 } else {
 timer = setTimeout(func, remaining);
 }
 }
}

前端基础面试:什么是防抖和节流?二者有什么区别?实际应用场景


需要在每个delay时间中一定会执行一次函数,因此在节流函数内部使用开始时间、当前时间与delay来计算remaining,当remaining<=0时表示该执行函数了,如果还没到时间的话就设定在remaining时间后再触发。当然在remaining这段时间中如果又一次发生事件,那么会取消当前的计时器,并重新计算一个remaining来判断当前状态。


推荐在线测试网站
http://demo.nimius.net/debounce_throttle/,


总结

防止一个事件频繁触发回调函数的方式:

防抖动:将几次操作合并为一此操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。

节流:使得一定时间内只触发一次函数。

它和防抖动最大的区别就是,节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而防抖动只是在最后一次事件后才触发一次函数。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: