JS中的防抖与节流及作用详解


Posted in Javascript onApril 01, 2019

概念

函数防抖(debounce)是指在一定时间内,在动作被连续频繁触发的情况下,动作只会被执行一次,也就是说当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间,所以短时间内的连续动作永远只会触发一次,比如说用手指一直按住一个弹簧,它将不会弹起直到你松手为止。

函数节流是指一定时间内执行的操作只执行一次,也就是说即预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期,一个比较形象的例子是如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。

函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。

下面通过示例代码看下防抖和节流。

什么是防抖?and什么是节流?一起来开心的学习下吧。

首先什么是防抖:就是在一定的时间内事件只发生一次,比如你点击button按钮,1秒内任你单身30年手速点击无数次,他也还是只触发一次。举个例子,当你在页面中使用onkeyUp监听用户在input框中的输入,如果用户按住一个6不放,那监听事件岂不是一直被触发,这样就浪费了一部分性能了,那么我们在一定事件内监听,也就是说我过了一秒再来看看你输入了多少个6,那这样是不是轻松多了。ok,解释清楚了那么就来看下代码,更加清晰。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>防抖</title>
</head>
<body>
 <button id="debounce">防抖,防抖,防抖</button>
 <script>
 window.onload = function () {
  let obtn = document.getElementById('debounce'); //获取按钮
 obtn.addEventListener('click',debounceHandle(debounce),false); //监听绑定事件
 }

 //防抖函数
 function debounceHandle (fn) {
  let timer = null;
  return function () {
  clearTimeout(timer); //如果存在事件就清除定时器
  timer = setTimeout(function(){ //如果不存在那么就开启定时器
   fn.call(this,arguments);
  },300)
  }
 }

 //执行函数
 function debounce() {
  console.log('防抖,防抖,防抖');
 }
 </script>
</body>
</html>

上面函数也就是在300毫秒内,只会触发一次事件。总结:防抖就是在任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行。

接下来什么是节流,假如在一个页面中有任意多张图片,那么就有可能会使用懒加载技术,懒加载呢就是监听滚动条的位置,那么如果用户一直在滚动,那么事件监听就一直在触发,也是浪费性能。那么节流就是在一定时间间隔内触发一次事件。话不多说,先看代码。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>节流</title>
 <style>
 div {
  height: 5000px;
 }
 </style>
</head>
<body>
 <div>节流,节流,节流</div>
 <script>
 window.onload = function () {
  window.addEventListener('scroll',throttleHandle(throttle),false); //监听绑定事件
 }

 //节流函数
 function throttleHandle (fn) {
  let timer = null,
   booleanVal = true; // 声明一个变量标志做判断
  return function () {
   if (!booleanVal) {
   return 
   } //如果事件正在执行,那么就返回,将布尔值改为false
   booleanVal = false;
   //事件未执行,创建事件
   timer = setTimeout(function() {
   fn.apply(this,arguments);
   booleanVal = true; //事件执行完将布尔值改回
   },300)
  }
 }

 //执行函数
 function throttle() {
  var scrollNum = document.documentElement.scrollTop || document.body.scrollTop;
  console.log(scrollNum);
 }
 </script>
</body>
</html>

这样,在某些特定的工作场景,我们就可以使用防抖与节流来减少不必要的损耗。最后提一个问题,上句提到造成不必要的损耗,那么请问是什么损耗呢?

总结

以上所述是小编给大家介绍的JS中的防抖与节流及作用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
在Vue中使用HOC模式的实现
Aug 23 Javascript
javascript对象3个属性特征
Nov 17 Javascript
微信小程序 slot踩坑的解决
Apr 01 #Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 #Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 #Javascript
详解JavaScript中的函数、对象
Apr 01 #Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 #Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 #Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 #Javascript
You might like
PHP中的日期处理方法集锦
2007/01/02 PHP
Views rows style模板重写代码
2011/05/16 PHP
PHP include_path设置技巧分享
2011/07/03 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
关于Python解包知识点总结
2020/05/05 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
优秀经理事迹材料
2014/02/01 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
红与黑读书笔记
2015/06/29 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL