underscore 防抖技巧学习示例
作者：一条会coding的Shark
前言
又是一个源码阅读的周末，这次来阅读和防抖相关的源码。我已经和防抖节流打过很多次交道了，感兴趣的朋友也可以去看看我之前有关防抖节流的文章。咱们话不多说，直接进入正题。
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 防抖的资料请关注脚本之家其它相关文章！