debounce与throttle区别
在2011年,Twitter网站曾爆出一个问题:在主页往下滚动时,页面会变得缓慢以致没有响应。John Resig发表了一篇文章《 a blog post about the problem》指出直接在scroll事件上面绑定高消耗的事件是一个多么愚蠢的想法。现在项目中大家都会对类似的scroll或者resize事件都进行了节流控制,下述是我们经常用到,也是《JavaScript高级程序设计》- JavaScript高级技巧中提及的节流方式。
/**
* 节流函数(JavaScript高级程序设计)
* @param method 方法
* @param scope 当前函数执行作用域
*/
function throttle(method, scope) {
clearTimeout(method.tId);
method.tId= setTimeout(function(){
method.call(scope);
}, 100);
}
function resizeDiv(){
var div = document.getElementById("myDiv");
div.style.height = div.offsetWidth + "px";
}
// 节流在resize事件中最常用
window.onresize = function(){
throttle(resizeDiv);
};
之前一直觉得上述代码就是实现了真正的节流,也没去深入研究。直到最近在和之前的同事讨论图表的问题,说起了“throttle和debounce”,他说我们项目中使用的不是真正意义上的throttle,而是一个debounce的简单实现。这里先简单介绍一下“throttle和debounce”,二者都是随着时间推移控制执行函数的次数来达到较少资源消耗,特别在事件触发上,尤为重要。
debounce(func, wait, immediate)
:创建并返回函数的防反跳版本,将延迟函数的执行(真正的执行)在函数最后一次调用时刻的wait毫秒之后,对于必须在一些输入(多是一些用户操作)停止之后再执行的行为有帮助。将一个连续的调用归为一个!throttle(func, wait, options)
:创建并返回一个像节流阀一样的函数,当重复调用函数的时候,最多每隔指定的wait毫秒调用一次该函数; 不允许方法在每wait ms间执行超过一次!
举个例子:页面存在一个按钮,通过throttle和debounce包括其监听函数,wait设置为1000ms。确保在每个1000ms内都多次触发click持续2000ms。
// 执行1次(最后一次点击1000ms后)
btnDom.addEventListener('click', debounce(clickBtn, 1000));
// 执行3次(点击立即执行一次、1000ms后执行一次,2000ms后执行一次)
btnDom.addEventListener('click', throttle(clickBtn, 1000));
debounce使用场景:
第一次触发后,进行倒计wait毫秒,如果倒计时过程中有其他触发,则重置倒计时;否则执行fn。用它来丢弃一些重复的密集操作、活动,直到流量减慢。例如:
- 对用户输入的验证,不在输入过程中就处理,停止输入后进行验证足以;
- 提交ajax时,不希望1s中内大量的请求被重复发送。
throttle使用场景
第一次触发后先执行fn(当然可以通过{leading: false}
来取消),然后wait ms后再次执行,在单位wait毫秒内的所有重复触发都被抛弃。即如果有连续不断的触发,每wait ms执行fn一次。与debounce相同的用例,但是你想保证在一定间隔必须执行的回调函数。例如:
- 对用户输入的验证,不想停止输入再进行验证,而是每n秒进行验证;
- 对于鼠标滚动、window.resize进行节流控制。
正真的业务场景:
一个相当常见的例子,用户在你无限滚动的页面上向下滚动鼠标加载页面,你需要判断现在距离页面底部多少。如果用户快接近底部时,我们应该发送请求来加载更多内容到页面。在此debounce
没有用,因为它只会在用户停止滚动时触发,但我们需要用户快到达底部时去请求。通过throttle
我们可以不间断的监测距离底部多远。
$(document).ready(function(){
// 这里设置时间间隔为300ms
$(document).on('scroll', throttle(function(){
check_if_needs_more_content();
}, 300));
// 是否需要加载更多资源
function check_if_needs_more_content() {
var pixelsFromWindowBottomToBottom = 0 + $(document).height() - $(window).scrollTop() - $(window).height();
// 滚动条距离页面底部小于200,加载更多内容
if (pixelsFromWindowBottomToBottom < 200){
// 加载更多内容
$('body').append($('.item').clone());
}
}
});
特别说明:
// 错误
$(window).on('scroll', function() {
debounce(doSomething, 300);
});
// 正确
$(window).on('scroll', debounce(doSomething, 200));
下述代码,引用自underscore
debounce函数
/**
* 防反跳。func函数在最后一次调用时刻的wait毫秒之后执行!
* @param func 执行函数
* @param wait 时间间隔
* @param immediate 为true,debounce会在wai 时间间隔的开始调用这个函数
* @returns {Function}
*/
function debounce(func, wait, immediate) {
var timeout, args, context, timestamp, result;
var later = function() {
var last = new Date().getTime() - timestamp; // 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 = new Date().getTime();
var callNow = immediate && !timeout;
if (!timeout) {
timeout = setTimeout(later, wait);
}
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
}
throttle函数
/**
* 创建并返回一个像节流阀一样的函数,当重复调用函数的时候,最多每隔 wait毫秒调用一次该函数
* @param func 执行函数
* @param wait 时间间隔
* @param options 如果你想禁用第一次首先执行的话,传递{leading: false},
* 如果你想禁用最后一次执行的话,传递{trailing: false}
* @returns {Function}
*/
function throttle(func, wait, options) {
var context, args, result;
var timeout = null;
var previous = 0;
if (!options) options = {};
var later = function() {
previous = options.leading === false ? 0 : new Date().getTime();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function() {
var now = new Date().getTime();
if (!previous && options.leading === false) previous = now;
var remaining = wait - (now - previous);
context = this;
args = arguments;
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;
};
}
debounce与throttle区别的更多相关文章
- debounce 与 throttle 区别
原文地址:http://undefinedblog.com/debounce-and-throttle/ 二.什么是debounce 1. 定义 如果用手指一直按住一个弹簧,它将不会弹起直到你松 ...
- 试议常用Javascript 类库中 throttle 与 debounce 辅助函数的区别
问题的引出 看过我前面两篇博客的童鞋可能会注意到都谈到了事件处理的优化问题. 在很多应用中,我们需要控制函数执行的频率, 例如 窗口的 resize,窗口的 scroll 等操作,事件触发的频率非常高 ...
- 白话debounce和throttle
遇到的问题 在开发过程中会遇到频率很高的事件或者连续的事件,如果不进行性能的优化,就可能会出现页面卡顿的现象,比如: 鼠标事件:mousemove(拖曳)/mouseover(划过)/mouseWhe ...
- Debounce 和 Throttle 的原理及实现---防止频繁触发某事件
原文:http://blog.csdn.net/redtopic/article/details/69396722 在处理诸如 resize.scroll.mousemove 和 keydown/ke ...
- 防抖(Debounce)与节流( throttle)区别
http://www.cnblogs.com/ShadowLoki/p/3712048.html http://blog.csdn.net/tina_ttl/article/details/51830 ...
- 函数防抖与函数节流 封装好的debounce和throttle函数
/** * 空闲控制 返回函数连续调用时,空闲时间必须大于或等于 wait,func 才会执行 * * @param {function} func 传入函数,最后一个参数是额外增加的this对象,. ...
- underscore里面的debounce与throttle
throttle 策略的电梯.保证如果电梯第一个人进来后,15秒后准时运送一次,不等待.如果没有人,则待机. debounce 策略的电梯.如果电梯里有人进来,等待15秒.如果又人进来,15秒等待重新 ...
- debounce、throttle、requestAnimationFrame
今天review同事代码,代码实现了返回顶部的功能,用到了lodash库中的throttle,我看着眼生,于是乎去看了下lodash文档,然后牵出了debounce,具体的知识点,这里不再赘述,底部的 ...
- debounce还是throttle(去抖和节流)
debounce 去抖 我的理解很简单,比方说window.onscroll会疯狂触发handler,此时给它一个debounce(handler, delayTime). 就是不管你延时时间内触发了 ...
随机推荐
- python16_day11【MQ、Redis、Memcache】
一.RabbitMQ 是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息队列(MQ)是一种应 ...
- Java集合(7):HashMap
一.HashMap介绍 HashMap是基于哈希表的 Map 接口的实现,以key-value的形式存在.在HashMap中,key-value总是会当做一个整体来处理,系统会根据hash算法来来计算 ...
- 详解HTTP中GET与POST的区别,不是你看过的标准答案!
防吐槽声明:本文适合程序员新人,自认阅文无数.技术超叼的大神不用看. GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含 ...
- PHPcms 调用命令的基本格式:
PHPcms 调用命令的基本格式: 开始:{pc:content action="模块操作名" catid="调用栏目ID" num="数据调用数量& ...
- BigDecimal相关整理
bigdecimal类型四则运算: BigDecimal s = new Bigdecimal(5); BigDecimal x = new Bigdecimal(15); 依次为最基础的加减乘除: ...
- zabbix安装配置agent程序之agent配置文件详解
安装zabbix-agent http://repo.zabbix.com/zabbix/3.2/rhel/6/x86_64/ 下载:zabbix-agent-3.2.0-1.el6.x86_64.r ...
- PM,RD,FE,UE,UI,QA,OP,DBA,BRD,MRD,PRD,FSD全称解析
PM 项目经理( Project Manager ) 从职业角度,是指企业建立以项目经理责任制为核心,对项目实行质量.安全.进度.成本管理的责任保证体系和全面提高项目管理水平设立的重要管理 ...
- Docker高级使用
Docker卸载应用程序 先删除容器,在删除镜像 查询容器 docker ps –a 使用容器id删除容器 docker rm 18e672ecd8ed 查询镜像 docker images 使用镜像 ...
- vim与shell终端操作技巧
一.快速注释多行代码 1.添加//注释符 :10,50s#^#//#g 使用#作为分隔符 2.删除//注释符 :10,50s#^//##g 使用#作为分隔符 3.添加#注释符 ...
- windows8.1下安装Cygwin并通过apt-cyg安装软件包
参考 http://yuanshuilee.blog.163.com/blog/static/2176972752014126786185/ http://www.cnblogs.com/zhang- ...