JS函数节流和函数防抖问题分析


Posted in Javascript onDecember 18, 2017

问题1:如果实现了dom拖拽功能,但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数,导致浏览器直接卡死,这个时候怎么办?

JS函数节流和函数防抖问题分析 

**问题2:**如果给一个按钮绑定了表单提交的post事件,但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交,如何防止多次提交的发生?

为了应对如上场景,便出现了 函数防抖 和 函数节流 两个概念,总的来说:

这两个方法是在 时间轴上控制函数的执行次数。

函数防抖(debounce)

概念: 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

生活中的实例: 如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10秒再出发(重新计时)。

函数节流(throttle)

概念: 规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。

生活中的实例: 我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时,在人眼的视觉中就会形成一个连贯的动画,所以在电影的播放(以前是,现在不知道)中基本是以每秒 24 张的速度播放的,为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候,100 张就会显得很浪费资源。

分析图

假设,我们观察的总时间为10秒钟,规定1秒作为一次事件的最小间隔时间。

如果触发事件的频率是 0.5s/次 ,那么函数防抖如图

JS函数节流和函数防抖问题分析 

因为始终没法等一秒钟就被再次触发了,所以最终没有一次事件是成功的。

函数节流如图

JS函数节流和函数防抖问题分析 

因为控制了最多一秒一次,频率为 0.5s/次 ,所以每一秒钟就有一次事件作废。最终控制成 1s/次

如果触发事件的频率是 2s/次 ,那么

函数防抖如图

JS函数节流和函数防抖问题分析 

因为 2s/次
已经大于了规定的最小时间,所以每计时两秒便触发一次。

函数节流如图

JS函数节流和函数防抖问题分析 

同样, 2s/次 大于了最小时间规定,所以每一次触发都生效。

应用场景

对于函数防抖,有以下几种应用场景:

  • 给按钮加函数防抖防止表单多次提交。
  • 对于输入框连续输入进行AJAX验证时,用函数防抖能有效减少请求次数。
  • 判断 scroll 是否滑到底部, 滚动事件 + 函数防抖

总的来说,适合多次事件 一次响应 的情况

对于函数节流,有如下几个场景:

  • 游戏中的刷新率
  • DOM元素拖拽
  • Canvas画笔功能

总的来说,适合 大量事件 按时间做 平均 分配触发。

源码

函数防抖:

function debounce(fn, wait) {
 var timer = null;
 return function () {
  var context = this
  var args = arguments
  if (timer) {
   clearTimeout(timer);
   timer = null;
  }
  timer = setTimeout(function () {
   fn.apply(context, args)
  }, wait)
 }
}
var fn = function () {
 console.log('boom')
}
setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发,之后每1000ms触发一次
setInterval(debounce(fn,2000),1000) // 不会触发一次(我把函数防抖看出技能读条,如果读条没完成就用技能,便会失败而且重新读条)

之所以返回一个函数,因为防抖本身更像是一个函数修饰,所以就做了一次函数柯里化。里面也用到了闭包,闭包的变量是 timer 。

函数节流

function throttle(fn, gapTime) {
 let _lastTime = null;
 return function () {
 let _nowTime = + new Date()
 if (_nowTime - _lastTime > gapTime || !_lastTime) {
  fn();
  _lastTime = _nowTime
 }
 }
}
let fn = ()=>{
 console.log('boom')
}
setInterval(throttle(fn,1000),10)

如图是实现的一个简单的函数节流,结果是 一秒打出一次boom

总结

以上所述是小编给大家介绍的JS函数节流和函数防抖问题分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
vue 将页面公用的头部组件化的方法
Dec 18 #Javascript
浅谈使用React.setState需要注意的三点
Dec 18 #Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 #Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 #Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 #Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 #Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 #Javascript
You might like
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
php查询内存信息操作示例
2019/05/09 PHP
document.documentElement && document.documentElement.scrollTop
2007/12/01 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
Python中的闭包总结
2014/09/18 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python函数式编程
2017/07/20 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python进行TCP端口扫描的实现
2018/12/21 Python
Python中@property的理解和使用示例
2019/06/11 Python
python tkinter窗口最大化的实现
2019/07/15 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
营销人才自我鉴定范文
2013/12/25 职场文书
公司委托书格式范本
2014/09/16 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
nginx配置虚拟主机的详细步骤
2021/07/21 Servers