浅析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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
详解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输出日历表代码实例
2015/03/27 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
Python pickle模块用法实例分析
2015/05/27 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
python将list转为matrix的方法
2018/12/12 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
超市中秋节促销方案
2014/03/21 职场文书
工作说明书范文
2014/05/07 职场文书
给校长的建议书100字
2014/05/16 职场文书
行政监察建议书
2014/05/19 职场文书
党员评议思想汇报
2014/10/08 职场文书
教代会开幕词
2015/01/28 职场文书
python中的被动信息搜集
2021/04/29 Python
MySQL学习之基础命令实操总结
2022/03/19 MySQL