上次又一次做了一个div固定的效果,考虑到onscroll会不停的执行。
var _b = $("#bottom"); $(window).scroll(function(){ var t = $(window).scrollTop(), str; console.log(t) if(t >= 200){ str = {"position" : "fixed", "top" : 200 + "px", "right" : "0px"}; }else{ str = {"position" : "absolute", "top" : 500 + "px", "right" : "0px"}; } _b.css(str); });
改变:
var processor = { timeoutId : null, // 实际进行处理的方法 performProcessing : function(){ var _b = $("#bottom"); var i = 0; var t = $(window).scrollTop(), str; // console.log(t) if(t >= 200){ str = {"position" : "fixed", "top" : 200 + "px", "right" : "0px"}; }else{ str = {"position" : "absolute", "top" : 500 + "px", "right" : "0px"}; } _b.css(str); i++; console.log(i); }, process : function(){ clearTimeout(this.timeoutId); var that = this; this.timeoutId = setTimeout(function(){ that.performProcessing(); },500); } }; // 尝试开始执行 window.onscroll = function(){ processor.process(); };
很明显i 值变少了。。。那么onresize呢?
onresize的正常函数:
window.onresize = function(){ var div = document.getElementById("myDiv"); div.style.height = div.offsetWidth + 'px'; console.log(div.offsetWidth); };
// 有两个问题会造成浏览器运行缓慢
// 1. 要计算offsetWidth 属性 首先:如果该元素或者页面上其他元素有非常复杂的css样式,那么这个过程会很复杂;其次:设置
// 某个元素的高度需要对页面进行回流来令改动生效
// 经测试,ie8,7在改变窗口大小时候 重复多次输出 div.offsetWidth
改良上面程序:
function throttle(method, context){// method : 要执行函数; context: 哪个作用域 clearTimeout(method.tId); // 首先清除之前设置的任何定时器 method.tId = setTimeout(function(){ method.call(context);// call(context) 确保方法在适当的环境中执行。如果没有第二个参数,在全局作用域执行改方法 }, 1000); } function resizeDiv(){ var div = document.getElementById("myDiv"); div.style.height = div.offsetWidth + 'px'; console.log(div.offsetWidth); }; window.onresize = function(){ throttle(resizeDiv); };
主要在ie87里面只输出两次。