浅析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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 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
SMARTY学习手记
2007/01/04 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
python装饰器与递归算法详解
2016/02/18 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
python颜色随机生成器的实例代码
2020/01/10 Python
详解Python中第三方库Faker
2020/09/25 Python
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
医院学雷锋活动策划方案
2014/02/15 职场文书
婚庆司仪主持词
2014/03/15 职场文书
授权委托书范本
2014/04/03 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
如何解决php-fpm启动不了问题
2021/11/17 PHP
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers