码迷,mamicode.com
首页 > 其他好文 > 详细

什么是函数节流?

时间:2015-10-18 00:55:18      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:

什么是函数节流?

介绍前,先说下背景。在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在一个正常的操作中,都有可能在一个短的时间内触发非常多次事件绑定程序。而大家知道,DOM操作时很消耗性能的,这个时候,如果你为这些事件绑定一些操作DOM节点的操作的话,那就会引发大量的计算,在用户看来,页面可能就一时间没有响应,这个页面一下子变卡了变慢了。甚至在IE下,如果你绑定的resize事件进行较多DOM操作,其高频率可能直接就使得浏览器崩溃。

函数节流的原理

函数节流的原理挺简单的,估计大家都想到了,那就是定时器。当我触发一个时间时,先setTimout让这个事件延迟一会再执行,如果在这个时间间隔内又触发了事件,那我们就clear掉原来的定时器,再setTimeout一个新的定时器延迟一会执行,就这样。

var main = {

    changeScreen: {
        init: function() {
            var _this = this;
            _this.obtainScreen();
            _this.resizeScreen();
        },

        obtainScreen: function() {
            var screenWidth,
                ua = navigator.userAgent.toLocaleLowerCase(),
                v = $.browser.version,
                $resizeScreen = $( "#resizeScreen" );

            screenWidth = window.innerWidth ? window.innerWidth :
                document.documentElement.clientWidth;

            if ( ua.indexOf( "msie" ) > -1 && +v < 10 ) { 
                if( screenWidth >= 1540 ) {
                    $resizeScreen.addClass( "w1240" );
                } else {
                    $resizeScreen.removeClass( "w1240" );
                }
            }
        },

        //函数节流的原理挺简单的,估计大家都想到了,那就是定时器
        throttle: function( fn, delay ) {
            var timer = null;
            return function() {
                var context = this, args = arguments;
                clearTimeout( timer );
                timer = setTimeout(function() {
                    fn.apply( context, args );
                }, delay );
            };
        },

        resizeScreen: function() {
            var _this = giftCommon.changeScreen;

            window.onresize = _this.throttle( _this.obtainScreen, 100 );
        }
    }

};

 

什么是函数节流?

标签:

原文地址:http://www.cnblogs.com/frontendBY/p/4876711.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!