遇到的问题

在开发过程中会遇到频率很高的事件或者连续的事件,如果不进行性能的优化,就可能会出现页面卡顿的现象,比如:

  1. 鼠标事件:mousemove(拖曳)/mouseover(划过)/mouseWheel(滚屏)
  2. 键盘事件:keypress(基于ajax的用户名唯一性校验)/keyup(文本输入检验、自动完成)/keydown(游戏中的射击)
  3. window的resize/scroll事件(DOM元素动态定位)

为了解决这类问题,常常使用的方法就是throttle(节流)debounce(去抖)。throttle(节流)和debounce(去抖)都是用来控制某个函数在一定时间内执行多少次的解决方案,两者相似而又不同。

下面就具体的看看两者的相似和区别。

认识throttle和debounce

throttle和debounce的作用就是确认事件执行的方式和时机,以前总是不太清楚两者的区别,容易把二者弄混。

下面就通过两个简单的场景描述一下debounce和throttle,以后想到这两个场景就不会再弄混了:

debounce假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯; 如果在电梯门关闭之前,又有人来了,你会继续开门;这样一直进行下去,你可能需要等待几分钟,最终没人进电梯了,才会关闭电梯门,然后上楼。

所以debounce的作用是,当调用动作触发一段时间后,才会执行该动作,若在这段时间间隔内又调用此动作则将重新计算时间间隔

throttle假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯;  但是,你是个没耐心的人,你最多只会等待电梯停留一分钟;在这一分钟内,你会开门让别人进来,但是过了一分钟之后,你就会关门,让电梯上楼。

所以throttle的作用是,预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新的时间周期

简单实现

有了上面的了解,就可以去实现简单debounce和throttle了。

debounce实现

首先来看看debounce的实现,根据前面对debounce的描述:

  1. debounce函数会通过闭包维护一个timer
  2. 当同一action在delay的时间间隔内再次触发,则清理timer,然后重新设置timer

可以在Chrome中运行下面的代码,看看debounce的效果,代码Github链接

var debounce = function(action, delay) {
var timer = null; return function() {
var self = this,
args = arguments; clearTimeout(timer);
timer = setTimeout(function() {
action.apply(self, args)
}, delay);
}
} // example
function resizeHandler() {
console.log("resize");
} window.onresize = debounce(resizeHandler, 300);

throttle实现

throttle跟debounce的最大不同就是,throttle会有一个阀值,当到达阀值的时候action必定会执行一次。

所以throttle的实现可以基于前面的debounce的实现,只需要加上一个阀值,代码Github链接

var throttleV1 = function(action, delay, mustRunDelay) {
var timer = null,
startTime; return function() {
var self = this,
args = arguments,
currTime = new Date(); clearTimeout(timer); if(!startTime) {
startTime = currTime;
} if(currTime - startTime >= mustRunDelay) {
action.apply(self, args);
startTime = currTime;
}
else {
timer = setTimeout(function() {
action.apply(self, args);
}, delay);
}
};
};

其实,对于上面的实现可以进心简化,只是通过闭包维护一个开始的时间:

var throttleV2 = function(action, delay){
var statTime = 0; return function() {
var currTime = +new Date(); if (currTime - statTime > delay) {
action.apply(this, arguments);
statTime = currTime ;
}
}
} // example
function resizeHandler() {
console.log("resize");
} window.onresize = throttleV2(resizeHandler, 300);

总结

通过前面的介绍,应该对debounce和throttle有一个直观的认识了:

  • debounce:把触发非常频繁的事件合并成一次执行
  • throttle:设置一个阀值,在阀值内,把触发的事件合并成一次执行;当到达阀值,必定执行一次事件

了解了throttle和debounce之后,下面看看他们的常用场景:

debounce

  • 对于键盘事件,当用户输入比较频繁的时候,可以通过debounce合并键盘事件处理
  • 对于ajax请求的情况,例如当页面下拉超过一定返回就通过ajax请求新的页面内容,这时候可以通过debounce合并ajax请求事件

throttle

  • 对于键盘事件,当用户输入非常频繁,但是我们又必须要在一定时间内(阀值)内执行处理函数的时候,就可以使用throttle

    • 例如,一些网页游戏的键盘事件
  • 对于鼠标移动和窗口滚动,鼠标的移动和窗口的滚动会带来大量的事件,但是在一段时间内又必须看到页面的效果

    • 例如对于可以拖动的div,如果使用debounce,那么div会在拖动停止后一下子跳到目标位置;这时就需要使用throttle

作者:Larissa_
链接:https://www.jianshu.com/p/e8ad62e29b03
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

throttle和debounce的更多相关文章

  1. [概念] js的函数节流和throttle和debounce详解

    js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...

  2. javascript中的throttle和debounce

    throttle 我们这里说的throttle就是函数节流的意思.再说的通俗一点就是函数调用的频度控制器,是连续执行时间间隔控制.主要应用的场景比如: 1.鼠标移动,mousemove 事件2.DOM ...

  3. 【 js 性能优化】throttle 与 debounce 节流

    在看 underscore.js 源码的时候,接触到了这样两个方法,很有意思: 我先把实现的代码撂在下面,看不懂的可以先跳过,但是跳过可不是永远跳过哦- 一个是 throttle: _.throttl ...

  4. 试议常用Javascript 类库中 throttle 与 debounce 辅助函数的区别

    问题的引出 看过我前面两篇博客的童鞋可能会注意到都谈到了事件处理的优化问题. 在很多应用中,我们需要控制函数执行的频率, 例如 窗口的 resize,窗口的 scroll 等操作,事件触发的频率非常高 ...

  5. 【 js 性能优化】【源码学习】underscore throttle 与 debounce 节流

    在看 underscore.js 源码的时候,接触到了这样两个方法,很有意思: 我先把实现的代码撂在下面,看不懂的可以先跳过,但是跳过可不是永远跳过哦- 一个是 throttle: _.throttl ...

  6. 日常的例子说明 throttle 和 debounce 的区别

    不小心接触到 throttle 和 debounce,按捺不住猎奇的心理,找这两个函数的资料. 然而百度到的各种对他们的理解,我去啊. 艰难地搞明白他们是干嘛的之后,忍不住举个例子说说自己的理解,希望 ...

  7. [JavaScript] 节流(throttle)-防抖(debounce) 不懵圈指北

    网易云课堂 > 微专业 > 前端高级开发工程师 01.前端高级-JavaScript进阶 > 3.函数式编程 Underscore源码分析 > 3.4.3 throttle 与 ...

  8. throttle和debounce简单实现

    function debounce(delay,fn){ var timer; return function(){ var ctx = this,args = arguments; clearTim ...

  9. 精简的javascript下throttle和debounce代码

    //频率控制 函数连续调用时,fn 执行频率限定为 1次/waitMs.立即执行1次 function throttle(fn, waitMs) { var lastRun = 0; return f ...

随机推荐

  1. gojs去水印

    重点在go.js文件中将这个方法中的代码注释掉即可 搜索关键字 7ca11abfd022028846 然后注释下列代码,注释前先整理JS格式 function ni() { if(th) { var ...

  2. HDFS一些基本操作方法

    启动hadoop cd /usr/local/hadoop ./sbin/start-dfs.sh 在浏览器中打开localhost:50070 找到 进入  操作 1)新建文件夹      在根目录 ...

  3. Python开发基础之Python常用的数据类型

    一.Python介绍 Python是一种动态解释型的编程语言.Python它简单易学.功能强大.支持面向对象.函数式编程,可以在Windows.Linux等多种操作系统上使用,同时Python可以在J ...

  4. JVM原理与深度调优(一)

    什么是jvm jvm是java虚拟机 运行在用户态.通过应用程序实现java代码跨平台.与平台无关.实际上是"一次编译,到处执行" 1.从微观来说编译出来的是字节码!去到哪个平台都 ...

  5. qemu-img 整理

    qemu-img命令语法: qemu-img command [command options] check命令: check [-f fmt < qcow2 | qed | vdi >] ...

  6. mysql 5.7 MGR

    最近看了一下mysql5.7的MGR集群挺不错的,有单主和多主模式,于是乎搭建测试了一下效果还不错,我指的不错是搭建和维护方面都比较简单.网上绝大多数都是单主模式,当然我这里也是,为了加深印象,特意记 ...

  7. CompressIt

    结构 压缩软件的核心在于压缩算法.基于Huffman编码的压缩算法思路: 以二进制方式读取源文件,按照每8bits作为一个字符: 统计每个字符的出现频率即为叶子结点的权值,按照Huffman算法得到每 ...

  8. 基于thinkphp3.2.3开发的CMS内容管理系统(二)- Rbac用户权限

    基于thinkphp3.2.3开发的CMS内容管理系统 thinkphp版本:3.2.3 功能: --分类栏目管理 --文章管理 --商品管理 --用户管理 --角色管理 --权限管理 --友情链接管 ...

  9. xenomai内核解析之xenomai的组成结构

    @ 目录 一.xenomai 3 二.xenomai3 结构 这是第二篇笔记. 一.xenomai 3 从xenomai3开始支持两种方式构建linux实时系统,分别是cobalt 和 mercury ...

  10. golang之channel

    Buffered Channels package main import "fmt" func main() { ch := make(chan int, 2) ch <- ...