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 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
js实现烟花特效
Mar 02 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 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
一个简单计数器的源代码
2006/10/09 PHP
php 显示指定路径下的图片
2009/10/29 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
python实现一个简单的并查集的示例代码
2018/03/19 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
Python操作qml对象过程详解
2019/09/26 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
python文件和文件夹复制函数
2020/02/07 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
创业计划实施的7大步骤
2014/02/05 职场文书
经典婚礼主持词
2014/03/13 职场文书
有关环保的标语
2014/06/13 职场文书
三好生演讲稿
2014/09/12 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
经验交流材料格式
2014/12/30 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python