关于js节流函数throttle和防抖动debounce
废话不多说,直奔主题。
什么是throttle和debounce?
这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说,没有处理时滑动一次滚动条scroll事件会触发多次,如果其中涉及的代码偏重,那么性能消耗肯定是非常大。使用节流和防抖就是去优化这种情况,通过同的使用场景决定使用的对象,接下来就对比一下两者的区别。
throttle
在指定的delay(延迟时间)内,在delay间隔内多次调用,throttle会舍弃中间的所有调用操作,直到用户停止行为后的delay后执行一次预期执行函数。这就称为函数节流。
debounce
跟节流函数一样,debounce也是在设定的delay间隔内多次调用执行函数的话,会舍弃这些操作。和throttle不同的是,debounce多了个强制执行时间参数mustRunDelay,不管前面舍弃了多少次操作,一旦时间tag>=mustRunDelay的话,执行函数一定会被调用一次。接下来上代码,更直观。
原文参考源代码出处
原文对于节流和防抖的描述有待商榷,但是最终的代码其实就是节流和防抖的综合体。通过是否传入mustRunDelay参数来区分。
function throttle (fn, delay, mustRunDelay = 0) {
let timer = null;
let tStart; //创建父级作用域时间tag
return function () {
const context = this;
const args = arguments;
const tCurr = +new Date();//子作用域时间tag
clearTimeout(timer);//每次执行,先清空定时器,这步操作便是delay时间内舍弃多余操作的实现
if (!tStart) { // 首次给时间tag赋值
tStart = tCurr;
}
//这层判断就是判断是否达到强制执行的条件
if (mustRunDelay !== 0 && tCurr - tStart >= mustRunDelay) {
fn.apply(context, args);
tStart = tCurr;
} else {
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
}
};
}
忽略throttle的方法名,按照调用方式不同,他也可以是debounce。主要实现在于通过异步操作的事件间隔,对于前后两次调用方法打时间tag进行比较,用清空定时器的操作实现多余调用操作的舍弃。还有一点是用了闭包的机制,便于管理tStart变量,因为闭包的关系,tStart内存不会被回收,否则需要在全局定义该变量。
结尾
具体怎么用呢,拿scroll事件举个例子:
window.addEventListenr('scroll',throttle(scrollHandle,delay,mustRunDelay),false);
大概就这意思,使用时候根据场景使用,mustRunDelay>0?防抖:节流。
关于js节流函数throttle和防抖动debounce的更多相关文章
- js 节流函数 throttle
/* * 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次 * @param fn {function} 需要调用的函数 * @param delay {number} 延迟时间, ...
- Javascript中 节流函数 throttle 与 防抖函数 debounce
问题的引出 在一些场景往往由于事件频繁被触发,因而频繁地进行DOM操作.资源加载,导致UI停顿甚至浏览器崩溃. 在这样的情况下,我们实际上的需求大多为停止改变大小n毫秒后执行后续处理:而其他事件大多的 ...
- 浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异
Underscore.js是一个很精干的库,压缩后只有5.2KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程. 本文仅探讨Underscore.js的两个 ...
- js节流函数和js防止重复提交的N种方法
应用情景 经典使用情景:js的一些事件,比如:onresize.scroll.mousemove.mousehover等: 还比如:手抖.手误.服务器没有响应之前的重复点击: 这些都是没有意义的,重复 ...
- 浅谈 Unserscore.js 中 _.throttle 和 _.debounce 的差异
来源:http://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs Unsersco ...
- js节流函数高级版
节流函数其主要作用就是防止用户在短时间内多次触发该事件. <!DOCTYPE html> <html lang="en"> <head> < ...
- 简单的节流函数throttle
在实际项目中,总会遇到一些函数频繁调用的情况,比如window.resize,mouseover,上传进度类似的触发频率比较高的函数,造成很大的性能损耗,这里可以使用节流函数来进行性能优化,主要是限制 ...
- Underscore.js 中 _.throttle 和 _.debounce 的差异
两个方法都是用来控制事件的频率的,在mousemove,resize等这种高频率触发事件中,控制其响应频率可以明显提高程序的流畅性,减少资源的占用. 通过分析其源代码: _.throttle方法源码 ...
- JavaScript 节流函数 Throttle 详解
在浏览器 DOM 事件里面,有一些事件会随着用户的操作不间断触发.比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动(mousemove).也就是说用户在触发这些浏 ...
随机推荐
- [论文笔记] Improving Head Pose Estimation with a Combined Loss and Bounding Box Margin Adjustment
Improving Head Pose Estimation with a Combined Loss and Bounding Box Margin Adjustment 简介 本文提出了一种网络结 ...
- 配置 setting镜像在nexus私服上下载
在你的本地仓库上 setting文件中配置,一旦nexus服务关闭是无法下载的 1 配置nexus镜像 <mirror> <id>central1</id> < ...
- hihoCoder#1879 : Rikka with Triangles (计算几何)
n<=2000,肯定没有办法把所有三角形找出来全判一遍 对于三角形的三个角,分别计算贡献,锐角的贡献是1倍面积,钝角的贡献是-2倍面积,这样算出角的贡献之后除以3就可以了 每次选择一个点为中心点 ...
- 简要介绍一下MD5加密的书写
大家应该多清楚数据的重要性,可以假设一下:一个非常大的企业,因为一个程序员的疏忽大意,没有使用MD5加密,那么可以说这个企业的数据库是非常不安全的,可以轻而易举的的访问你的数据库,并执行任何操作. 下 ...
- [LeetCode] 272. Closest Binary Search Tree Value II 最近的二叉搜索树的值 II
Given a non-empty binary search tree and a target value, find k values in the BST that are closest t ...
- 正则表达式——推荐使用 Unicode 编码
常见的正则表达式的文档都是关于英文(ASCII字符)的,英文开发者通常也只需要处理ASCII字符,不需要处理中文这类多字符的字符.不过,依照李处ASCII字符的方式处理中文字符,就有可能出错. ...
- [Mac Terminal] ___切换到其他路径和目录
如果你想将当前 command line 会话切换到其他目录,需要用到三个命令:pwd,ls和cd. pwd的含义是“print working directory”,会显示当前目录的绝对路径.ls的 ...
- 【Qt开发】Qt标准对话框之QMessageBox
好久没有更新博客,主要是公司里面还在验收一些东西,所以没有及时更新.而且也在写一个基于Qt的画图程序,基本上类似于PS的东西,主要用到的是Qt Graphics View Framework.好了,现 ...
- Hive-多分隔符
ROW FORMAT SERDE 'org.apache.hadoop.hive.contrib.serde2.MultiDelimitSerDe' WITH SERDEPROPERTIES (&qu ...
- OracleOraDb11g_home1TNSListener服务无法启动
作者:伪墨 来源:CSDN 原文:https://blog.csdn.net/qq997404392/article/details/73296429 今天遇到OracleOraDb11g_home1 ...