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 防抖的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了微信小程序如何获取用户头像和昵称，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码，对弹出框和提示框感兴趣的小伙伴们可以参考一下2015-12-12
JavaScript使用indexOf获得子字符串在字符串中位置的方法
这篇文章主要介绍了JavaScript使用indexOf获得子字符串在字符串中位置的方法,涉及javascript中indexOf方法操作字符串的技巧,需要的朋友可以参考下2015-04-04
一直都觉得网站优化的重点是图片，图片的使用也是博大精深。本文将总结一下图片的日常使用以及优化手法，下面跟着小编一起来看下吧2017-01-01
最近加入到新项目组负责前端技术预研和选型，其中涉及到一个熟悉又陌生的需求——国际化＆本地化。熟悉的是之前的项目也玩过，陌生的是之前的实现仅仅停留在"有"的阶段而已。趁着这个机会好好学习整理一下，为后面的技术选型做准备2016-09-09
上传图片前预览图片这种效果应用比较广泛，实现的方也大同小异，下面为大家介绍下，在javascript中是如何实现的，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了在JavaScript中运行.NET Core代码详情，DotNetJS可以将C#项目编译为与任何环境兼容的单文件JavaScript库，变可以在JavaScript中运行.NET Core代码，相关操作分享详情，需要的小伙伴可以参考一下2022-04-04
公司项目中有地图展示和定位功能,所以下面这篇文章主要给大家介绍了关于uniapp使用百度地图的保姆式教学,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。这篇文章主要给大家介绍postman自定义函数实现 时间函数的思路详解，感兴趣的朋友一起看看吧2019-04-04
这篇文章主要介绍了JS实现向iframe中表单传值的方法,涉及js针对页面元素及表单属性操作相关实现技巧,需要的朋友可以参考下2017-03-03
最新评论