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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
How to Auto Include a Javascript File
Feb 02 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
jquery获取radio值实例
Oct 16 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
javascript三种代码注释方法
Jun 02 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
JS常见算法详解
Feb 28 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
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
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
js读取cookie方法总结
2014/10/31 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
python传递参数方式小结
2015/04/17 Python
Python的Django框架中的Context使用
2015/07/15 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
python实现图片识别汽车功能
2018/11/30 Python
python实现小球弹跳效果
2019/05/10 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
费用会计岗位职责
2014/01/01 职场文书
打架检讨书800字
2014/01/10 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
保密工作整改报告
2014/11/06 职场文书
英语感谢信范文
2015/01/20 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
python自动化之如何利用allure生成测试报告
2021/05/02 Python
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js