浅谈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 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
js实现带搜索功能的下拉框
Jan 11 Javascript
JS数组的常用方法整理
Mar 31 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
PHP脚本数据库功能详解(中)
2006/10/09 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python实现dict版图遍历示例
2014/02/19 Python
Python多进程编程技术实例分析
2014/09/16 Python
Python访问MySQL封装的常用类实例
2014/11/11 Python
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
python实现汉诺塔算法
2021/03/01 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
python str字符串转uuid实例
2020/03/03 Python
详解pandas映射与数据转换
2021/01/22 Python
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
工厂保安员岗位职责
2014/01/31 职场文书
校园文化建设方案
2014/02/03 职场文书
个人担保书格式范文
2014/05/12 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
同事离别感言
2015/08/04 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
OpenCV实现反阈值二值化
2021/11/17 Java/Android
Java中try catch处理异常示例
2021/12/06 Java/Android