本文主要介绍的是关于 JS 中比较常用的 函数 ：节流 函数 和防抖函数，从概念、使用场景到代码简单实现做了一个详细的区分。希望对你有所帮助。

在写 JS 时，这两个函数比较常见，有时候傻傻分不清用哪个，或者说知道代码要怎么写，但要说出它究竟是节流函数还是防抖函数时一脸楞逼。今天有一个同学分享了这两个的区分，我也来回顾一下，加深一下印象，以便日后用到时心里有底。 PS ：百度和谷歌搜索前几个介绍都是相反介绍，本文为原创，如有雷同纯属抄袭我的。

节流概念 (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();

}

}