JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用。
函数节流的原理挺简单的,估计大家都想到了,那就是定时器。当我触发一个时间时,先setTimout让这个事件延迟一会再执行,如果在这个时间间隔内又触发了事件,那我们就clear掉原来的定时器,再setTimeout一个新的定时器延迟一会执行,就这样。
以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。
1. window对象的resize、scroll事件
2. 拖拽时的mousemove事件
3. 射击游戏中的mousedown、keydown事件
4. 文字输入、自动完成的keyup事件
实际上对于window的resize事件,实际需求大多为停止改变大小n毫秒后执行后续处理;而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两种解决办法。
throttle 和 debounce 是解决请求和响应速度不匹配问题的两个方案。二者的差异在于选择不同的策略。
throttle 等时间 间隔执行函数。
debounce 时间间隔 t 内若再次触发事件,则重新计时,直到停止时间大于或等于 t 才执行函数。
一、throttle函数的简单实现
function throttle(fn, threshhold, scope) {
threshhold || (threshhold = 250);
var last,
timer;
return function () {
var context = scope || this;
var now = +new Date(),
args = arguments;
if (last && now - last + threshhold < 0) {
// hold on to it
clearTimeout(deferTimer);
timer = setTimeout(function () {
last = now;
fn.apply(context, args);
}, threshhold);
} else {
last = now;
fn.apply(context, args);
}
};
}
调用方法
$('body').on('mousemove', throttle(function (event) {
console.log('tick');
}, 1000));
二、debounce函数的简单实现
function debounce(fn, delay) {
var timer = null;
return function () {
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
调用方法
$('input.username').keypress(debounce(function (event){
// do the Ajax request
}, 250));
三、简单的封装实现
/** * throttle * @param fn, wait, debounce */
var throttle = function ( fn, wait, debounce ) {
var timer = null, // 定时器
t_last = null, // 上次设置的时间
context, // 上下文
args, // 参数
diff; // 时间差
return function () {
var curr = + new Date(),
context = this,
args = arguments;
clearTimeout( timer );
if ( debounce ) { // 如果是debounce
timer = setTimeout( function () {
fn.apply( context, args );
}, wait );
}else{ // 如果是throttle
if ( !t_last ) t_last = curr;
if ( curr - t_last >= wait ) {
fn.apply( context, wait );
context = wait = null;
}
}
}
}/** * debounce * @param fn, wait */ var debounce = function ( fn, wait ) {
return throttle( fn, wait, true );
}
这两个方法适用于会重复触发的一些事件,如:mousemove,keydown,keyup,keypress,scroll等。
如果只绑定原生事件,不加以控制,会使得浏览器卡顿,用户体验差。为了提高js性能,建议在使用以上及类似事件的时候用函数节流或者函数去抖加以控制。 四、underscore v1.7.0相关的源码剖析
1. _.throttle函数
_.throttle = function(func, wait, options) {
var context, args, result;
var timeout = null;
// 定时器
var previous = 0;
// 上次触发的时间
if (!options) options = {};
var later = function() {
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;
// 这里引入了一个remaining的概念:还剩多长时间执行事件
var remaining = wait - (now - previous);
context = this;
args = arguments;
// remaining <= 0 考虑到事件停止后重新触发或者
// 正好相差wait的时候,这些情况下,会立即触发事件
// remaining > wait 没有考虑到相应场景
// 因为now-previous永远都是正值,且不为0,那么
// remaining就会一直比wait小,没有大于wait的情况
// 估计是保险起见吧,这种情况也是立即执行
if (remaining <= 0 || remaining > wait)
{
if (timeout)
{
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;
};
};
由上可见,underscore考虑了比较多的情况:options.leading:
第一次是否执行,默认为true,表示第一次会执行,传入{leading:false}则禁用第一次执行
options.trailing:最后一次是否执行,默认为true,表示最后一次会执行,
传入{trailing: false}表示最后一次不执行所谓第一次是否执行,是刚开始触发事件时,要不要先触发事件,如果要,则previous=0,remaining 为负值,则立即调用了函数所谓最后一次是否执行,是事件结束后,最后一次触发了此方法,如果要执行,则设置定时器,即事件结束以后还要在执行一次。remianing > wait 表示客户端时间被修改过。
2. _.debounce函数
_.debounce = function(func, wait, immediate) {
// immediate默认为false
var timeout, args, context, timestamp, result;
var later = function() {
// 当wait指定的时间间隔期间多次调用_.debounce返回的函数,则会不断更新timestamp的值,导致last < wait && last >= 0一直为true,从而不断启动新的计时器延时执行func var last = _.now() - timestamp;
if (last < wait && last >= 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
return function()
{
context = this;
args = arguments;
timestamp = _.now();
// 第一次调用该方法时,且immediate为true,则调用func函数
var callNow = immediate && !timeout; // 在wait指定的时间间隔内首次调用该方法,则启动计时器定时调用func函数
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
};
_.debounce实现的精彩之处我认为是通过递归启动计时器来代替通过调用clearTimeout来调整调用func函数的延时执行。
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)的更多相关文章
- [JavaScript] 函数节流(throttle)和函数防抖(debounce)
js 的函数节流(throttle)和函数防抖(debounce)概述 函数防抖(debounce) 一个事件频繁触发,但是我们不想让他触发的这么频繁,于是我们就设置一个定时器让这个事件在 xxx 秒 ...
- javascript 函数节流 throttle 解决函数被频繁调用、浏览器卡顿的问题
* 使用setTimeout index.html <html> <head> <meta charset="UTF-8"> <title ...
- JS中的函数节流throttle详解和优化
JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...
- JavaScript性能优化
如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...
- 摘:JavaScript性能优化小知识总结
原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在 ...
- JavaScript性能优化小窍门汇总(含实例)
在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛.在web应用项目中,需要大量JavaScript的代码,将来也会越来越多.但是由于J ...
- js 函数节流throttle 函数去抖debounce
1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...
- JavaScript性能优化小知识总结(转)
JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在 ...
- JavaScript性能优化篇js优化
JavaScript性能优化篇js优化 随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...
- 函数节流throttle和防抖debounce
throttle 函数节流 不论触发函数多少次,函数只在设定条件到达时调用第一次函数设定,函数节流 1234567891011 let throttle = function(fn,intervalT ...
随机推荐
- vue2
props 向子组件传递数据是经常会用到的,一般是在子组件定义 props 来接受数据,当父组件改变数据时子组件的数据也会进行更新.但这里是有一个坑的,先看代码: <pagination :pa ...
- 规则集之探究何时使用HashSet、LinkedHashSet以及TreeSet?
前言 Java集合框架三种主要类型的集合:规则集(Set).线性表(List).队列(Queue).Set用来存储不可重复的元素:List用来存储有元素构成的有序的集合:而Queue则用于存储用先进先 ...
- 09 Linear Regression
线性回归假设 错误衡量/代价函数---均方误差 最小化样本内代价函数 只有满秩方阵才有逆矩阵 线性回归算法 线性回归算法是隐式迭代的 线性回归算法泛化可能的保证 线性分类是近似求解,线性回归是解析求解 ...
- Java中继承与多态
Java类的继承继承的语法结构: [修饰符列表] class 子类名 extends 父类名{ 类体; }子类就是当前这个类,父类就是我们要复用的那个类java中只支持单继承 ...
- Java 第六周总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- Java课程设计----仿Windows标准型计算器
JAVA课程设计 仿Windows标准型计算器(By Yanboooooooo) 一.团队介绍: 连燕波[组长]:网络1513学生. 张文博[组员]:网络1513学生. 二.项目git地址 码云项目地 ...
- Java课程设计——计算器
1.团队课程设计博客链接 http://www.cnblogs.com/yuanj/p/7072137.html 2.个人负责模块或任务说明 确定课题并进行任务分工 编写计算器删除,清零,清空,小数点 ...
- 201521123024 《Java程序设计》第13周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容.
- 201521123066《Java程序设计》第十三周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...
- python实例编写(7)---测试报告与测试套件(多个py文件,1个py文件内多个用例)
一. 一个.py文件批量执行测试用例(一个.py文件下多个用例执行) 如果直接使用:unittest.main(),则按字母顺序执行, 对于前后之间又依赖关系的用例,需要按特定的顺序执行,则使用 s ...