浅析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 相关文章推荐
图片自动缩小 点击放大
Jul 07 Javascript
jQuery示例收集
Nov 05 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
微信小程序后端实现授权登录
Feb 24 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去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
yii分页组件用法实例分析
2015/12/28 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
PDO::exec讲解
2019/01/28 PHP
JavaScript效率调优经验
2009/06/04 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
Vue $attrs & inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
python3中str(字符串)的使用教程
2017/03/23 Python
Python星号*与**用法分析
2018/02/02 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
文科毕业生自荐书范文
2014/04/17 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
2014年绿化工作总结
2014/12/09 职场文书
大学生党性分析材料
2014/12/19 职场文书
钱学森电影观后感
2015/06/04 职场文书
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang