本篇内容主要讲解“JS节流和防抖的区分和实现”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JS节流和防抖的区分和实现”吧!
节流概念(Throttle)
按照设定的时间固定执行一次函数，比如200ms一次。注意：固定就是你在mousemove过程中，执行这个节流函数，它一定是200ms（你设定的定时器延迟时间）内执行一次。没到200ms，一定会返回，没有执行回调函数的。
主要应用场景有：scroll、touchmove
防抖概念(Debounce)
抖动停止后的时间超过设定的时间时执行一次函数。注意：这里的抖动停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间，则一定不会到回调函数那一步。
主要应用场景有：input验证、搜索联想、resize
节流实现
思路： 第一次先设定一个变量true，第二次执行这个函数时，会判断变量是否true，是则返回。当第一次的定时器执行完函数最后会设定变量为flase。那么下次判断变量时则为flase，函数会依次运行。
代码一：首次不执行
function throttle(fn,delay=100){
//首先设定一个变量，在没有执行我们的定时器时为null
let timer = null;
return function(){
//当我们发现这个定时器存在时，则表示定时器已经在运行中，需要返回
if(timer) return;
timer = setTimeout(()=>{
fn.apply(this,arguments);
timer = null;
},delay);
}
}
代码二：首次执行
function throttle2(fn,delay=100){
let last = 0;
return function(){
let curr = +new Date();
if(curr - last > delay){
fn.apply(this,arguments);
last = curr;
}
}
}
防抖实现
思路：首次运行时把定时器赋值给一个变量，第二次执行时，如果间隔没超过定时器设定的时间则会清除掉定时器，重新设定定时器，依次反复，当我们停止下来时，没有执行清除定时器，超过一定时间后触发回调函数。
代码一：首次不执行
function debounce(fn,delay=200){
let timer = null;
return function(){
if(timer) clearTimeout(timer);
timer = setTimeout(()=>{
fn.apply(this,arguments);
timer = null;
},delay);
}
}
代码二：首次执行
//code from http://caibaojian.com/throttle-debounce.htmlfunction debounce2(fn, delay = 200, atBegin = true) {
let timer = null, last = 0,during;
return function () {
let self = this, args = arguments;
var exec = function () {
fn.apply(self, args);
}
if (atBegin && !timer) {
exec();
atBegin = false;
} else {
during = Date.now() - last;
if (during > delay) {
exec();
} else {
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
exec();
}, delay);
}
}
last = Date.now();
}
}
到此，相信大家对“JS节流和防抖的区分和实现”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
