underscore 防抖技巧学习示例
前言
又是一个源码阅读的周末，这次来阅读和防抖相关的源码。我已经和防抖节流打过很多次交道了，感兴趣的朋友也可以去看看我之前有关防抖节流的文章。咱们话不多说，直接进入正题。
underscore 和防抖
这次我们主要介绍防抖。（毕竟咱们标题就是跟着underscore学防抖👀）
虽然我们对防抖的概念已经很清楚了，但是我在这里还是不得不多提一嘴，关于防抖节流请务必好好掌握。那么，防抖该如何定义呢？防抖就是要延迟执行，我们一直操作触发事件并且不执行，只有当停止操作后等才会执行。防抖适合多次事件一次响应的情况。
这里再介绍一下underscore吧。underscore是一个JavaScript工具库，它提供了很多常用函数的源码，这也就是此文标题的由来了👀。
源码解读
我们找到如下部分即可。
整个防抖源码的部分并不多，不过四十多行，源码部分如下：
export default function debounce(func, wait, immediate) {
var timeout, previous, args, result, context;
var later = function () {
var passed = now() - previous;
if (wait > passed) {
timeout = setTimeout(later, wait - passed);
} else {
timeout = null;
if (!immediate) result = func.apply(context, args);
if (!timeout) args = context = null;
}
};
var debounced = restArguments(function (_args) {
context = this;
args = _args;
previous = now();
if (!timeout) {
timeout = setTimeout(later, wait);
if (immediate) result = func.apply(context, args);
}
return result;
});
debounced.cancel = function () {
clearTimeout(timeout);
timeout = args = context = null;
};
return debounced;
}
我们现在来分析一下这段代码。
首先定义了一系列变量 timeout, previous, args, result, context。然后又定义了一个later函数，later函数中的 timeout=null 是为了清空timeout，也可以理解为在重置timeout，防止影响它下次使用。
然后在debounce函数执行了later函数。
if (!timeout) {
timeout = setTimeout(later, wait);
if (immediate) result = func.apply(context, args);
}
和我们之前手写代码的防抖有所不同的是，这里加入了cancle取消方法，可以随时取消执行函数，这里算是整个源码部分比较新颖的一点吧，我也是第一次认识到，学习了。
debounced.cancel = function () {
clearTimeout(timeout);
timeout = args = context = null;
};
总结
之前手写过防抖节流，这次又跟着underscore学习防抖的源码，我对防抖这一部分的认识又更进了一步，也对这些函数的运用有了更好的理解。除此之外，也了解了underscore这个工具库，收获满满。
以上就是underscore 防抖学习的详细内容，更多关于underscore 防抖的资料请关注脚本之家其它相关文章！
相关文章
JavaScript+html5 canvas绘制渐变区域完整实例
这篇文章主要介绍了JavaScript+html5 canvas绘制渐变区域的方法,结合完整实例形式分析了canvas颜色调用与图形绘制的相关技巧,需要的朋友可以参考下2016-01-01
前几天一个同事问我如下的JavaScript代码如何理解2009-06-06
这篇文章主要介绍了利用Vconsole和Fillder进行移动端抓包调试，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要为大家详细介绍了原生js模拟购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这是一个非常有趣的题目。我们先从Object.prototype.toString入手，看能否解决它。2010-02-02
这篇文章主要为大家详细介绍了JS实现简易计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
今天做网站的时候需要用上JS轮播图代码,而且还要求是原生的JS代码,下面这篇文章主要给大家介绍了关于Html+CSS+JS轮播图实现的相关资料,文中介绍的方法包括手动轮播和自动轮播,需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了原生JavaScript实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了通过WebSocket实现异步导出,本篇文章记录大批量数据导出时间过长,导致接口请求超时问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-01-01
这篇文章介绍了JavaScript获取多个数组的交集简单实例，有需要的朋友可以参考一下2013-11-11
最新评论