白话debounce和throttle

遇到的问题

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

  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

转载于:https://www.cnblogs.com/gluncle/p/9945009.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/464393.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows平台下使用Active Directory对Subversion进行权限控制(非完美解决方案)

Windows平台下使用Active Directory对Subversion进行权限控制(非完美解决方案) Windows平台下使用Active Directory对Subversion进行权限控制(非完美解决方案) 目前网上找到的Subversion的配置说明中,关于用户权限控制…

wireshark抓包工具的使用及分析

前段时间看到群里在讨论Wireshark抓包工具,想写一篇使用笔记但一直没来得及写,本篇就通过实例来分享wireshark抓包工具的使用。Wireshark简介 Wireshark 是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详…

EventLoop笔记

node环境 Event Loop各阶段: - timers 阶段:这个阶段执行 setTimeout 和 setInterval 的回调函数。- I/O callbacks 阶段:不在 timers 阶段、close callbacks 阶段和 check 阶段这三个阶段执行的回调,都由此阶段负责&#xff0c…

如何实现android和服务器长连接呢?推送消息的原理

转载地址:http://blog.csdn.net/q376420785/article/details/8653958 前言:现在的大多数移动端应用都有实时得到消息的能力,简单来说,有发送消息的主动权和接受消息的被动权。例如:微信,QQ,天气…

linux入门系统那个好,初学Linux哪个发行版本好?这些更合适!

Linux是非常受欢迎的技术,现在很多人都开始转行学习Linux,不过大家都知道Linux发行版本众多,在学习的时候我该选择哪个发行版本呢?为大家介绍一下。其实在挑选Linux发行版本之前,我们首先要根据自己的需求决定。如果抱着试试的心…

git 使用及常用命令介绍

一、git 常用命令 git clone 地址 克隆项目 git status 查看当前状态 git add 文件或文件夹 (加入本地暂存目录) git commit -m "注释" 提交到本地版本库(暂存区) git commit -a -m "注释" 提交全部改动文件 …

asp.net中的记忆盲区

<1> 连接数据库 用read方法取出数据 在web.config取出连接字符串 string sqlconn ConfigurationManager.ConnectionStrings["db_showHouseConnectionString"].ToString(); SqlConnection connnew SqlConnection (sqlconn ); SqlComman…

调试网络收发不通问题

今天在做之前一个项目重构的事情&#xff0c;需要把之前的代码重新做功能&#xff0c;我们有两个设备&#xff0c;他们通过网线连接&#xff0c;用UDP来传输数据。很多人都怀疑UDP丢包什么&#xff0c;不及时什么之类的&#xff0c;如果想把事情做得足够快&#xff0c;最好还是…

VB6.0和VB.Net对照表

想在网上找一下VB.Net中&#xff0c;哪些是VB6.0遗留下来的东西&#xff0c;哪些是VB.Net增加的东西。结果中文的没有找到&#xff0c;找到了一个日文网页。简单的翻译了一下&#xff0c;放在这里&#xff0c;供需要的人参考。 VB6.0和VB.Net的对照表VB6.0VB.NETAddItem Object…

hibernate的初次使用

转载地址&#xff1a;http://blog.csdn.net/aboy123/article/details/10222675 一、Hibernate概述 &#xff08;一&#xff09;什么是Hibernate&#xff1f; hibernate核心内容是ORM&#xff08;关系对象模型&#xff09;。可以将对象自动的生成数据库中的信息&#xff0c;使…

linux 关联数组,linux 普通数组和关联数组

数组&#xff1a;就是借助索引将多个数据存储为一个集合。普通数组&#xff1a;数组的索引只能使用整数关联数组&#xff1a;数组的索引可以使用整数和字符串(要bash4.0以上的版本才支持关联数组)数组通常与循环或者其他判断式交互使用才有比较高的意义普通数组的定义array1(a …

layui之在table的编辑的按钮的思考

点编辑的时候&#xff0c;如果没有在html界面写form&#xff0c;而是在同级目录下写的 修改html的话呢&#xff0c; 就可以在点 编辑 按钮的时候&#xff0c;调用打开tab的方法&#xff0c;把form的html打开&#xff0c;而不用去后台转发转载于:https://www.cnblogs.com/fuckin…

删除rz上传失败乱码的文件

通过rz上传文件失败时&#xff0c;会产生大小为0的乱码的文件&#xff0c;如下 ls -l -rw-r–r– 1 root root 47031 12-15 13:48 ?ղ??.htm 这种类型的文件可用以下命令 find . -maxdepth 1 -size 0 | xargs rm -rf 说明&#xff1a;这种文件大小为0&#xff0c;并且在上…

我用过 | Keil的发展历史

Keil&#xff0c;相信搞嵌入式软硬件开发的读者都不陌生&#xff0c;在全球单片机&#xff08;MCU&#xff09;集成开发环境&#xff08;IDE&#xff09;中&#xff0c;可以说 Keil 占据了半壁江山。Keil 既是一家公司的名称&#xff0c;也是一款 IDE 软件。下面讲述一下 Keil …

C#实现简单WEB服务器

一、HTTP协议的作用原理WWW是以Internet作为传输媒介的一个应用系统&#xff0c;WWW网上最基本的传输单位是Web网页。WWW的工作基于客户机/服务器计算模型&#xff0c;由Web 浏览器(客户机)和Web服务器(服务器)构成&#xff0c;两者之间采用超文本传送协议&#xff08;HTTP&…

奥鹏C语言专科在线作业答案,电子科大12春《C语言(专科)》在线作业三

《C语言(专科)》在线作业三试卷总分&#xff1a;100 测试时间&#xff1a;-- 试卷得分&#xff1a;100单选题、单选题(共 20 道试题&#xff0c;共 100 分。) 得分&#xff1a;1001. 若有定义&#xff1a;intw[3][5];&#xff0c;则以下不能正确表示该数组元素…

理解Android Binder机制原理

原文地址&#xff1a; http://blog.csdn.net/universus/article/details/6211589 Binder是Android系统进程间通信&#xff08;IPC&#xff09;方式之一。Linux已经拥有的进程间通信IPC手段包括(Internet Process Connection)&#xff1a; 管道&#xff08;Pipe&#xff09;、信…

嵌入式算法-傅里叶变换算法

摘要&#xff1a;傅里叶变换的核心在于&#xff0c;“任何连续周期信号可以由一组适当的正弦曲线组合而成”&#xff0c;在这个基础上对信号的中特定频率的正弦波进行分解或者重组&#xff0c;基于频率方面分析波形。1、傅里叶变换的意义近似周期性的方波&#xff08;橙色&…

磁盘,硬盘,软盘,光盘的区别

计算机存储器分为两大类&#xff1a;内存存储器和外部存储器&#xff08;简称内存或内存条和外存&#xff09;。内存容量小&#xff0c;存取速度快&#xff0c;只能临时保存信息&#xff08;经cup处理后的数据&#xff09;&#xff0c;断电后信息就会消失。外存容量大&#xff…

Server 2008 R2 AD RMS完整部署:AD部署篇

在上一篇里我们完成了基本环境的准备&#xff0c;这一篇主要是讲AD的部署&#xff0c;完成之后我们需要把RMS服务器和两个客户端都加入到域中。好了废话就不说了&#xff0c;首先在我们创建的DC虚机上登录&#xff0c;并对计算机名称进行修改。 完成后先不要忙着重启&#xff0…