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 相关文章推荐
用javascript来实现动画导航效果的代码
Dec 16 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
js实现内置计时器
Dec 16 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 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 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
Linux中Python 环境软件包安装步骤
2016/03/31 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
django 中QuerySet特性功能详解
2019/07/25 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
庆中秋节主题活动方案
2014/02/03 职场文书
语文教育专业求职信
2014/06/28 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
介绍信格式样本
2015/05/05 职场文书
《落花生》教学反思
2016/02/16 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
总结几个非常实用的Python库
2021/06/26 Python
css3带你实现3D转换效果
2022/02/24 HTML / CSS
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang