浅谈JavaScript函数节流


Posted in Javascript onDecember 09, 2014

浏览器中某些计算和处理要比其他的昂贵的多。例如,DOM操作比起非DOM交互需要更多的内存和CPU时间。连续尝试进行过多的DOM相关操作可能会导致 浏览器挂起,有时候甚至会崩溃。尤其在IE中使用onresize事件处理程序的时候容易发生,当调整浏览器大小的时候,该事件连续触发。在 onresize事件处理程序内部如果尝试进行DOM操作,其高频率的更改可能会让浏览器崩溃。

     函数节流背后的基本思想是,某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用 该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其 替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

function throttle ( method , context ){
        clearTimeout ( method.tId );
        method.tId = setTimeout ( function () {
           method.call ( context );
         } , 100);
     }

应用举例:
     假设有一个<div/>元素需要保持它的高度始终等同于宽度,可作如下编码:

function resizeDiv(){
        var div = document.getElementById("mydiv");
        div.style.height = div.offsetWidth + "px";
      }
      window.onresize = function(){
        throttle(resizeDiv);
      }

这里,调整大小的功能被放入了一个叫做resizeDiv的单独函数中,然后onresize事件处理程序调用throttle()并传入 resizeDiv函数,而不是直接调用resizeDiv()。多数情况下,用户是感觉不到变化的,虽然给浏览器节省的计算可能非常大。

下面是其他网友的补充

今天主要写写我们平时工作中需要的函数节流。可能有的朋友对函数节流没有意识。其实,在工作中,很多场景都需要我们进行js的节流。最常见的是屏幕伸缩resize,以及touchmove或者scroll等事件的时候。大家不知道有没有看我之前写的文章!jquery判断页面滚动条上滚下滚,touchmove的滑动方向,大家在使用这些例子的时候,会发现页面不停的触发touchmove或者scroll因为这里没有关系到页面的重绘,因此,我在这里没有使用javascript函数节流。但是,当我们使用window.onresize的时候,也会不停的触发resize事件!这里就会关系到页面的重新绘制问题了。因此,在window的resize的时候,我们推荐大家使用函数节流的方式!

javascript函数节流简介
假如你对我上面一大坨文字感到头大,没关系,我在这里简单举例说明一下函数节流吧!例如当我们使用

$(window).resize(function(){
      console.log("haorooms window resize");
    })

会发现:

浅谈JavaScript函数节流

这里会输出好多次。我们简单的缩小一下窗口,就会不停的触发!

这样在div很多的时候,页面不停重绘,要是遇到版本比较低的IE等,很可能会出现浏览器崩溃的现象!为了避免这种情况,我们可以用函数节流的方式。基本的思想是:第一次调用函数的时候,我们创建一个定时器,在指定时间间隔之后运行代码,第二次调用的时候,会清楚前一个定时器,并重新设置一个。如果前一个定时器已经执行过了,那么这个操作就没有有意了,如果定时器尚未执行,就会将其替换为一个新的定时器。目的是在执行函数停止了一段时间之后再执行。

用对象的方式可以如下写:

var haoroomstest={
      timeoutId:null,
      performProcessing:function(){        
          console.log("resize");      

      },
      process:function(){
        clearTimeout(this.timeoutId);
        var that=this;
        this.timeoutId=setTimeout(function(){
          that.performProcessing();
        },500)
      }
    }

这样之后,我们再用:

$(window).resize(function(){ haoroomstest.process(); })

浅谈JavaScript函数节流

这样就会减少请求,减少dom重绘,达到节流的目的!

函数节流其他方式
除了我们运用对象的方式,网上及资料中也介绍了关于函数节流的其他方法和方式,我下面简单介绍几种!

函数方式一

function throttle(method,context){
      clearTimeout(method.tId);
      method.tId=setTimeout(function(){
        method.call(context);
      },100);
    }

我们如下使用

function resizeDIv(){
      console.log("haorooms")
    }

    $(window).resize(function(){
      throttle(resizeDIv)
    })

和上面对象实现了同样的效果!

函数方式二

网上还有一种比较流行的节流方式,我在这里写一下!

function throttle(method,delay){
      var timer=null;
      return function(){
        var context=this, args=arguments;
        clearTimeout(timer);
        timer=setTimeout(function(){
          method.apply(context,args);
        },delay);
      }
    }

然后可以这么写:

function resizeDIv(){
      console.log("haorooms")
    }

   window.onresize=throttle(resizeDIv,500);

新需求

我们在做模糊搜索智能联想提示的时候,会在input上面绑定keyup事件。但是我又不想触发的那么频繁,用上面的方式就会有问题。因此,在上面的函数基础上稍加改动,如下:

function throttle(method,delay,duration){
      var timer=null, begin=new Date();
      return function(){
        var context=this, args=arguments, current=new Date();;
        clearTimeout(timer);
        if(current-begin>=duration){
           method.apply(context,args);
           begin=current;
        }else{
          timer=setTimeout(function(){
            method.apply(context,args);
          },delay);
        }
      }
}

这样触发就不会有之前那么频繁了!

Javascript 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
javascript打开word文档的方法
Apr 16 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
js制作支付倒计时页面
Oct 21 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 Javascript
node.js中的console.log方法使用说明
Dec 09 #Javascript
node.js中的console.warn方法使用说明
Dec 09 #Javascript
node.js中的console.info方法使用说明
Dec 09 #Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 #Javascript
node.js中的console.trace方法使用说明
Dec 09 #Javascript
node.js中的console.time方法使用说明
Dec 09 #Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 #Javascript
You might like
第八节 访问方式 [8]
2006/10/09 PHP
php 文件上传系统手记
2009/10/26 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
jQuery技巧总结
2011/01/01 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
Vuex提升学习篇
2018/01/11 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
python使用post提交数据到远程url的方法
2015/04/29 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
出国导师推荐信
2014/01/16 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
法学专业求职信范文
2015/03/19 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书