JS魔法堂：函数节流（throttle）与函数去抖（debounce）(1)

如果用手指一直按住一个弹簧，它将不会弹起直到你松手为止。

也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。

接口定义：

/**

• 空闲控制 返回函数连续调用时，空闲时间必须大于或等于 idle，action 才会执行

• @param idle {number} 空闲时间，单位毫秒

• @param action {function} 请求关联函数，实际应用需要调用的函数

• @return {function} 返回客户调用函数

*/

debounce(idle,action)

2. 简单实现

var debounce = function(idle, action){

var last

return function(){

var ctx = this, args = arguments

clearTimeout(last)

last = setTimeout(function(){

action.apply(ctx, args)

}, idle)

}

}

三、什么是throttle

1. 定义

如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。

也就是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

接口定义：

/**

• 频率控制 返回函数连续调用时，action 执行频率限定为 次 / delay

• @param delay {number} 延迟时间，单位毫秒

• @param action {function} 请求关联函数，实际应用需要调用的函数

• @return {function} 返回客户调用函数

*/

throttle(delay,action)

2. 简单实现

var throttle = function(delay, action){

var last = 0return function(){

var curr = +new Date()

if (curr - last > delay){

action.apply(this, arguments)

last = curr

}

}

}

四、underscore v1.7.0相关的源码剖析

1. _.throttle函数

_.throttle = function(func, wait, options) {

/* options的默认值

• 表示首次调用返回值方法时，会马上调用func；否则仅会记录当前时刻，当第二次调用的时间间隔超过wait时，才调用func。

• options.leading = true;

• 表示当调用方法时，未到达wait指定的时间间隔，则启动计时器延迟调用func函数，若后续在既未达到wait指定的时间间隔和func函数又未被调用的情况下调用返回值方法，则被调用请求将被丢弃。

• options.trailing = true;

• 注意：当options.trailing = false时，效果与上面的简单实现效果相同

*/

var context, args, result;

var timeout = null;

var previous = 0;

if (!options) options = {};

var later = function() {

previous = options.leading === false ? 0 : _.now();

timeout = null;

result = func.apply(context, args);

if (!timeout) context = args = null;

};

return function() {

var now = _.now();

if (!previous && options.leading === false) previous = now;

// 计算剩余时间

var remaining = wait - (now - previous);

context = this;

args = arguments;

// 当到达wait指定的时间间隔，则调用func函数

// 精彩之处：按理来说remaining <= 0已经足够证明已经到达wait的时间间隔，但这里还考虑到假如客户端修改了系统时间则马上执行func函数。

if (remaining <= 0 || remaining > wait) {

// 由于setTimeout存在最小时间精度问题，因此会存在到达wait的时间间隔，但之前设置的setTimeout操作还没被执行，因此为保险起见，这里先清理setTimeout操作

if (timeout) {

clearTimeout(timeout);

timeout = null;

}

previous = now;

result = func.apply(context, args);

if (!timeout) context = args = null;

} else if (!timeout && options.trailing !== false) {

// options.trailing=true时，延时执行func函数

timeout = setTimeout(later, remaining);

}

return result;

};

};

按理来说remaining <= 0已经足够证明已经到达wait的时间间隔，至于remaining > wait的作用是什么，我现在也不太清楚。

精彩之处：按理来说remaining <= 0已经足够证明已经到达wait的时间间隔，但这里还考虑到假如客户端修改了系统时间则马上执行func函数。这里谢谢@GreatFeng的提示！

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

戳这里免费领取前端学习资料

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）*

[外链图片转存中…(img-EXOdIpHP-1713516874935)]

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

戳这里免费领取前端学习资料