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 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
javascript实现动态标签云
Oct 16 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
用js实现放大镜效果
Oct 28 Javascript
JavaScript实现班级抽签小程序
May 19 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实现获取中英文首字母
2015/06/19 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
Yii快速入门经典教程
2015/12/28 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
python访问系统环境变量的方法
2015/04/29 Python
Golang与python线程详解及简单实例
2017/04/27 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
解释i节点在文件系统中的作用
2013/11/26 面试题
考试没考好检讨书
2015/05/06 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python