浅析JavaScript 函数防抖和节流


Posted in Javascript onJuly 13, 2020

函数防抖和节流都是对高频动作触发回调函数的一个优化,实现方式上有类似之处。先从使用场景做个区分。

防抖使用场景:

  • 表单输入框校验
  • 提交按钮避免重复提交

节流使用场景:

  • scroll,mousemove,resize等

函数防抖(debounce)

表单输入框校验在用户不停的打字输入时并不需要向后台校验文本,只有当用户停下来一定时间后,这时候默认用户已经输入完毕了可以开始向后台提交文本了。

表单的提交按钮被用户多次连续点击时,显然并不需要每次点击都提交表单。仅在用户不点击之后,把最后一次的点击操作执行即可。

防抖函数的适用场景都有一个共同特点,就是高频触发并不会立即高频的执行,只有在结束高频触发一定时间间隔之后,执行最后一次触发。

代码实现就很简单了,短时间高频触发则重置计时器,计时器到达指定时间后,方才执行回调函数

var debounce = function (func, wait) {
  var timer;
  return function () {
    var self = this, args = arguments;
    if (timer) clearTimeout(timer);
    timer = setTimeout(function () {
      func.apply(self, args);
    }, wait);
  }
}
/**
这里使用闭包是为了保存计时器,而不是定义一个全局变量来存放计时器。apply的作用则是为了处理this指向和参数的传递,因为setTimeout会将this指向window。
*/

函数节流(throttle)

在触发频率很高的场景中,通常并不需要以同样的高频来执行回调函数,这时候需要人为的控制回调函数执行频率,以一个固定的较低频率来执行。

实现原理是,记录第一次触发时间,之后每次触发都对比是否到达指定的间隔时间,只有大于等于指定间隔才会再次执行,并重新开始记录触发时间。

可以用时间戳记录并计算出时间间隔,同样也可以用计时器来控制时间间隔。

var throttle = function (func, wait) {
  var timer;
  return function () {
    var self = this, args = arguments;
    if (!timer) {
      timer = setTimeout(function () {
        func.apply(self, args)
        clearTimeout(timer)
        timer = null;
      }, wait)
    }
  }
}

最后用一张图来对比防抖和节流函数的执行的频率,可视化实现

浅析JavaScript 函数防抖和节流

以上就是浅析JavaScript 函数防抖和节流的详细内容,更多关于JavaScript 函数防抖和节流的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
详解JavaScript 异步编程
Jul 13 #Javascript
javascript canvas时钟模拟器
Jul 13 #Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 #Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 #Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 #Javascript
Js on及addEventListener原理用法区别解析
Jul 11 #Javascript
JS call()及apply()方法使用实例汇总
Jul 11 #Javascript
You might like
如何判断php数组的维度
2013/06/10 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
js实现select下拉框选择
2020/01/11 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
PyQt5 多窗口连接实例
2019/06/19 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
python 检测图片是否有马赛克
2020/12/01 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
应用服务器有那些
2012/01/19 面试题
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
大学毕业感言100字
2014/02/03 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
白血病募捐倡议书
2014/05/14 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript