javascript函数的节流[throttle]与防抖[debounce]


Posted in Javascript onNovember 15, 2017

防抖和节流

窗口的resize、scroll,输入框内容校验等操作时,如果这些操作处理函数较为复杂或页面频繁重渲染等操作时,如果事件触发的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少触发的频率,同时又不影响实际效果。

这两个东西都是为了项目优化而出现的,官方是没有具体定义的,他们的出现主要是为了解决一些短时间内连续执行的事件带来性能上的不佳和内存的消耗巨大等问题;

像这类事件一般像 scroll keyup mousemove resize等等,短时间内不断的触发,在性能上消耗是非常大的,尤其是一些改变DOM结构的操作;

节流[throttle]与防抖[debounce]非常相似,都是让上述这类事件在规定的事件从不断的去触发更改成为规定的时间内触发多少次;

节流[throttle]

节流通俗来解释就比如我们水龙头放水,阀门一打开,水哗哗的往下流,这个秉着勤俭节约的优良传统美德,我们要把水龙头关小点,最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴,这,,,好吧这就是我们节流的概念;

换成函数来说,使用setTimeout方法,给定两个时间,后面的时间减去前面的时间,到达我们给定的时间就去触发一次这个事件,这么说太笼统的,我们看下面的函数,这里我们以【scroll】为例;

/** 样式我就顺便写了 **/
<style>
 *{padding:0;margin:0;}
 .scroll-box{
  width : 100%;
  height : 500px;
  background:blue;
  overflow : auto;
 } 
 .scroll-item{
  height:1000px;
  width:100%;
 }
</style>

------------------------

/** 先给定DOM结构;**/
<div class="scroll-box">
 <div class="scroll-item"></div>
</div>

------------------------

/**主要看js,为了简单我用JQ去写了**/
<script>
 $(document).ready(function(){
  var scrollBox = $('.scroll-box');
  //调用throttle函数,传入相应的方法和规定的时间;
  var thro = throttle(throFun,300);
  //触发事件;
  scrollBox.on('scroll' , function(){
   //调用执行函数;
   thro();
  })

  // 封装函数; 
  function throttle(method,time){
   var timer = null;
   var startTime = new Date();
   return function(){
    var context = this;
    var endTime = new Date();
    var resTime = endTime - startTime;
    //判断大于等于我们给的时间采取执行函数;
    if(resTime >= time){
     method.call(context);
     //执行完函数之后重置初始时间,等于最后一次触发的时间
     startTime = endTime;
    }
   }
  }
  function throFun(){
   console.log('success');
  }
 })
</script>

通过以上的函数,我们就可以做到节流的效果,在规定的每300毫秒触发一次,当然时间可以自定义,根据需求来;

防抖[debounce ]

写代码之前,我们先清楚一下防抖的概念,不知道大家有没有做过电脑端两边悬浮广告窗口的这么一个东西,当我们拖动滚动条的时候,两边的广告窗口会因为滚动条的拖动,而不断的尝试着去居于中间,然后你就会看到这两个窗口,不停的抖啊抖;

一般这种就叫抖动了,我们要做的就是防止这种抖动,称为防抖[debounce ];

那这里防抖思想就是当我们拖动完成之后,两边的窗口位置再重新去计算,这样,就会显得很平滑,看着很舒服了,最主要的操作DOM结构的次数就大大减少了;

优化了页面性能,降低了内存消耗,不然你像IE这种比较老点版本的浏览器,说不定就直接给你蹦了

用书面一点的说法就是,在某个事件没有结束之前,函数不会执行,当结束之后,我们给定延时时间,然他在给定的延时时间之后再去执行这个函数,这就是防抖函数;

来看代码:

//将上面的throttle函数替换为debounce函数;
function debounce(method,time){
 var timer = null ;
 return function(){
  var context = this;
  //在函数执行的时候先清除timer定时器;
  clearTimeout(timer);
  timer = setTimeout(function(){
   method.call(context);
  },time);
 }
}

思路就是在函数执行之前,我们先清除定时器,如果函数一直执行,就会不断的去清除定时器中的方法,知道我们操作结束之后,函数才会执行;

其实书写的方式有很多,主要还是思路的问题,大家写的多了,自然就知道了;

用途

  1. 当我们做keyup像后台请求检验的时候,可以使用防抖函数,不然我们每按一次键盘就请求一次,请求太频繁,这样当我们结束按键盘的时候再去请求,请求少很多了,性能自然不用说;
  2. resize 窗口大小调整的时候,我们可以采用防抖技术也可以使用节流;
  3. mousemove 鼠标移动事件我们既可以采用防抖也可以使用节流;
  4. scroll 滚动条触发的事件,当然既可以采用防抖也可以采用节流;
  5. 连续高频发的事件都可以采用这两种方式去解决,优化页面性能;

具体的采用哪一种更较为合适,主要还是看你的业务需求,好了,本篇就到这里了,感谢大家阅读;希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
使用javascript插入样式
Mar 14 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
ES10的13个新特性示例(小结)
Sep 23 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
基于jQuery实现定位导航位置效果
Nov 15 #jQuery
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 #Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 #Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 #Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 #Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 #Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 #Javascript
You might like
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python遍历数组的方法小结
2015/04/30 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
python3图片文件批量重命名处理
2019/10/31 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
动态密码技术
2012/10/18 面试题
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
施工资料员的岗位职责
2013/12/22 职场文书
矫正人员思想汇报
2014/01/08 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
golang中的空slice案例
2021/04/27 Golang
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python