JS简单实现防抖-debounce和节流-throttle

来源：动视网责编：小采时间：2020-11-27 19:32:55

JS简单实现防抖-debounce和节流-throttle

JS简单实现防抖-debounce和节流-throttle:一、什么是防抖和节流Ps: 比如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，那得消耗多大的服务器资源，即使你的服务器资源很强大，也不带这么玩的。1. 防抖 - debounce其中一种解决方案就是每次用户停止输入后，延迟

推荐度：

点击下载本文 文档为doc格式

导读JS简单实现防抖-debounce和节流-throttle:一、什么是防抖和节流Ps: 比如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，那得消耗多大的服务器资源，即使你的服务器资源很强大，也不带这么玩的。1. 防抖 - debounce其中一种解决方案就是每次用户停止输入后，延迟

2. 节流 - throttle

另一种解决方案比防抖要宽松些，这时我们不想用户一味的输入，而是给用户一些搜索提示，所以在当中每过500ms就查询一次此时的String，这就是节流。

原理：节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

代码实现有两种，一种是时间戳，另一种是定时器
1）时间戳实现：

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

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

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

fucntion throttle(func, delay){
 let timer = null;

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

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

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

function throttle(func, delay){
 let timer = null;
 let startTime = Date.now();

 return function(){
 let curTime = Date.now();
 let remaining = delay - (curTime - startTime);
 const context = this;
 const 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来判断当前状态。

javascript函数的节流throttle与防抖debounce详解

详解javascript函数的节流与防抖

JS简单实现防抖-debounce和节流-throttle

推荐度：

点击下载本文 文档为doc格式

标签：实现 js 防抖

热门焦点

JS简单实现防抖-debounce和节流-throttle

JS简单实现防抖-debounce和节流-throttle

2. 节流 - throttle

JS简单实现防抖-debounce和节流-throttle

最新推荐

猜你喜欢

热门推荐