js 节流函数

js 节流函数

Ie中如何onresize 事件中更新dom节点,容易使IE卡顿

所以使用节流:

var timer_tmp_2016;
    window.onresize = function () {
        var $body2 = $('body');
        if (timer_tmp_2016 == null) {
            timer_tmp_2016 = setTimeout(function () {
                //缩放后你要执行的代码

                var bodyHeight = $body2.height();//包括滚动条的高度
                var docHeight = $(document).height();//浏览器当前窗口文档的高度,包括滚动条的高度
                console.log(bodyHeight + ' , ' + docHeight);
//            alert($body2.css('height'))
                
                var payBtnLabel=$('#money_label').html();
                //console.log(payBtnLabel);
                $('#money_label').html(payBtnLabel);
                console.log('onresize');
                timer_tmp_2016 = null;
                console.log(new Date())
            }, 1000);
        }

    };

 上述方法有问题,因为在定时过程中,再次触发就直接忽略了,那么存在一个问题

定时器完成前,我拖动窗口(改变窗口大小),不能起到效果

 

优化:

/***
 * 需要注意:分支二走完之后,需要清空t_start 吗?<br>
 *     如果不清空,会有这种清空:执行完分支二之后,马上执行分支一<br>
 *         e.g:var func3=throttle3(myFunc,2000,2100);<br>
 *         需要保证:(1)连续频繁地点击,则每隔runDelay 秒,必须执行一次;<br>
 *         (2)随意的乱点击,一定会执行至少一次<br>
 *         定时器执行时,需要重置t_start,否则执行完分支二之后,马上执行分支一<br>
 * @param fn
 * @param delay
 * @param runDelay
 * @returns {Function}
 */
function throttle3(fn, delay, runDelay, scope) {
    var timer = null;
    var t_start;
    return function () {
        //没有传递参数runDelay,但是传递scope
        if (runDelay && (typeof runDelay != 'number') && (!scope)) {
            scope = runDelay;
        }
        var context = scope || this,
            args = arguments,
            t_cur = new Date();
        // console.log(context);
        timer && clearTimeout(timer);
        if (!t_start) {
            t_start = t_cur;
        }
        // console.log('t_start:'+t_start);
        // console.log('t_cur:'+t_cur);
        // console.log('t_cur - t_start:'+(t_cur - t_start));
        //runDelay的类型等于'undefined',表示没有传递参数runDelay
        if ((typeof runDelay != 'undefined') && (t_cur - t_start >= runDelay)) {
            fn.apply(context, args);//分支一
            t_start = t_cur;
            // console.log('一:' + new Date());
        } else {
            timer = setTimeout(function () {//分支二
                fn.apply(context, args);
                // console.log('二:' + new Date());
                t_start = new Date();
            }, delay);
        }
    }
}

 

使用:

var keepFooterBottom=function () {
            //缩放后你要执行的代码
            var $body2 = $('body');
            var bodyHeight = $body2.height();//包括滚动条的高度
            var docHeight = $(document).height();//浏览器当前窗口文档的高度,包括滚动条的高度
            console.log(bodyHeight + ' , ' + docHeight);
//            alert($body2.css('height'))
            /*if (bodyHeight && bodyHeight < docHeight) {
             $body2.height(docHeight);
             $body2.css('height', 'auto');
             }*/
            var payBtnLabel=$('#money_label').html();
            //console.log(payBtnLabel);
            $('#money_label').html(payBtnLabel);
            console.log('onresize');
            console.log(new Date());
            var $pay_btn=$('.orderPayNow ul.pay-btn');
            if($('body').width()<1000){
                $pay_btn.css('width','auto');
            }else{
                $pay_btn.css('width','1000px');
            }
        };
        var keepFooterBottomThrottle=throttle3(keepFooterBottom,500,1000);
        window.onresize = function () {
           
            keepFooterBottomThrottle();
        };