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 相关文章推荐
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
YUI模块开发原理详解
Nov 18 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 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连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
php上传图片类及用法示例
2016/05/11 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
js获取内联样式的方法
2015/01/27 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
wxPython中listbox用法实例详解
2015/06/01 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Python遍历字典方式就实例详解
2019/12/28 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
临床医学应届生求职信
2013/11/06 职场文书
农贸市场管理制度
2014/01/31 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
幼儿园辞职书
2015/02/26 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
通用员工手册范本
2015/05/14 职场文书
学生退学证明
2015/06/23 职场文书
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript