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(); };