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 相关文章推荐
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
常用一些Javascript判断函数
Aug 14 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
Javascript的闭包详解
Dec 26 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 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入门的学习方法
2007/01/02 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
python字符串常用方法
2018/06/14 Python
python中join()方法介绍
2018/10/11 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
Python中一般处理中文的几种方法
2019/03/06 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
个人找工作自荐信格式
2013/09/21 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
农村葬礼主持词
2014/03/31 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
演讲稿的写法
2014/05/19 职场文书
详细总结Python常见的安全问题
2021/05/21 Python