Underscore.js 中 _.throttle 和 _.debounce 的差异
两个方法都是用来控制事件的频率的,在mousemove,resize等这种高频率触发事件中,控制其响应频率可以明显提高程序的流畅性,减少资源的占用。 通过分析其源代码:
_.throttle
方法源码

/**
* 频率控制 返回函数连续调用时,func 执行频率限定为 次 / wait
*
* @param {function} func 传入函数
* @param {number} wait 表示时间窗口的间隔
* @param {object} options 如果想忽略开始边界上的调用,传入{leading: false}。
* 如果想忽略结尾边界上的调用,传入{trailing: false}
* @return {function} 返回客户调用函数
*/
_.throttle = function(func, wait, options) {
var context, args, result;
var timeout = null;
// 上次执行时间点
var previous = 0;
if (!options) options = {};
// 延迟执行函数
var later = function() {
// 若设定了开始边界不执行选项,上次执行时间始终为0
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;
// 延迟时间间隔remaining小于等于0,表示上次执行至此所间隔时间已经超过一个时间窗口
// remaining大于时间窗口wait,表示客户端系统时间被调整过
if (remaining <= 0 || remaining > wait) {
clearTimeout(timeout);
timeout = null;
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
//如果延迟执行不存在,且没有设定结尾边界不执行选项
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
};

_.debounce
方法源码

/**
* 空闲控制 返回函数连续调用时,空闲时间必须大于或等于 wait,func 才会执行
*
* @param {function} func 传入函数
* @param {number} wait 表示时间窗口的间隔
* @param {boolean} immediate 设置为ture时,调用触发于开始边界而不是结束边界
* @return {function} 返回客户调用函数
*/
_.debounce = function(func, wait, immediate) {
var timeout, args, context, timestamp, result; var later = function() {
// 据上一次触发时间间隔
var last = _.now() - timestamp; // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
// 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
}; return function() {
context = this;
args = arguments;
timestamp = _.now();
var callNow = immediate && !timeout;
// 如果延时不存在,重新设定延时
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
} return result;
};
};

_.throttle像一个节流阀,在预设时间内,不管事件触发多少次,只执行一次,而_.debounce则像电梯,只有当两次事件触发的间隔大于预设时间,才会触发事件。如果电梯里有人进来,开始等待。如果又人进来,重新计时等待,直到超过预设时间,开始执行
转载来源:http://www.cnblogs.com/lingtong/p/4072869.html
Underscore.js 中 _.throttle 和 _.debounce 的差异的更多相关文章
- 浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异
Underscore.js是一个很精干的库,压缩后只有5.2KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程. 本文仅探讨Underscore.js的两个 ...
- 浅谈 Unserscore.js 中 _.throttle 和 _.debounce 的差异
来源:http://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs Unsersco ...
- underscore.js中的节流函数debounce及trottle
函数节流 throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...
- underscore.js源码解析【'_'对象定义及内部函数】
(function() { // Baseline setup // -------------- // Establish the root object, `window` (`self`) in ...
- underscore.js中模板函数应用
一.使用技术要点 (1)使用zepto.js的ajax请求; (2)使用underscore.js的_.template设定模板,模板一般以<script type="text/tem ...
- 浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异[转]
看的文章来自: https://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs 使用 ...
- 关于js节流函数throttle和防抖动debounce
废话不多说,直奔主题. 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化.最常见的应用尝尽就是在通过监听resize.scroll.mouseover等事件时候的性能消 ...
- js中split,splice,slice方法之间的差异。
首先我们先来林格斯双击翻译一下: split 劈开, 使分裂: splice 接合; 使结合: slice 切成薄片, 切: 我先是这么区分的:这三个方法最后一个字母是t的是字符串方法,是e的 ...
- javascript中的throttle和debounce
throttle 我们这里说的throttle就是函数节流的意思.再说的通俗一点就是函数调用的频度控制器,是连续执行时间间隔控制.主要应用的场景比如: 1.鼠标移动,mousemove 事件2.DOM ...
随机推荐
- redhat 6 / centos 6 搭建Django环境
1)首先 安装的时候 到 选择安装那些包的时候 把 编译环境和开发的包 那块全部打上勾 2)系统虽然自带Python安装包,但是版本比较低.所以推荐自行进行tar包编译安装比较新的 https:// ...
- 最长公共子串 NYOJ 36
http://acm.nyist.net/JudgeOnline/problem.php?pid=36 最长公共子序列 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 ...
- Backpack | & ||
Backpack | Given n items with size Ai, an integer m denotes the size of a backpack. How full you can ...
- 使用wkhtmltopdf实现HTML转PDF的解决方案
最近,项目需要将HTML页面转换为PDF文件,所以就研究了下HTML转PDF的解决方案,发现网上比较流行的解决方案有3种: (1)iText (2)Flying Saucer (3)wkhtmltop ...
- HDU1267 递推
下沙的沙子有几粒? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total S ...
- Androidi性能优化之多线程和同步
线程: 创建线程的方法: a:定义Thread类的实例,并start(); b:实现Runnable接口,并作为参数传给Thread类的实例,然后start(); 不管线程是通过什么方式创建的,它都有 ...
- yum_rpm(利用dvd建立本地yum库)
#wget "http://mirrorlist.centos.org/?release=6&arch=x86_64&repo=os" 建立起了index.html ...
- C++ STL算法系列4---unique , unique_copy函数
一.unique函数 类属性算法unique的作用是从输入序列中“删除”所有相邻的重复元素. 该算法删除相邻的重复元素,然后重新排列输入范围内的元素,并且返回一个迭代器(容器的长度没变,只是元素顺序 ...
- 昨天用的流量有点多60M
就是因为值班这里没有无线,然后自己又是受前几次的影响,没有收到微信,然后就看了热点,这是用的快的.
- CI中写原生SQL(封装查询)
封装查询 封装,通过让系统为你组装各个查询语句,能够简化你的查询语法.参加下面的范例: $sql = "SELECT * FROM some_table WHERE id = ? AND s ...