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 相关文章推荐
js 窗口抖动示例
Sep 04 Javascript
深入探讨前端框架react
Dec 09 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 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/08/11 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
在Python中使用模块的教程
2015/04/27 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python中的id()函数指的什么
2017/10/17 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
Python上下文管理器全实例详解
2019/11/12 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
2014升学宴答谢词
2014/01/26 职场文书
校庆标语集锦
2014/06/25 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
2014年工商所工作总结
2014/12/09 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
晶体管单管来复再生式收音机
2021/04/22 无线电