有些时候，我们需要在浏览器窗口发生变化的时候，动态的执行一些操作，比如做自适应页面时的适配。这个时候，我们需要在窗口拖动的时候去执行代码。但是有些时候，执行的操作比较复杂，我们只希望在窗口拖动完毕之后，在执行代码，否则极容易造成浏览器假死状态，这个时候该如何解决呢。
解决resize执行多次
如何实现不管窗口如何改变，只在停止改变之后才执行代码呢？我们来对之前的代码做下修改：
var resizeTimer = null;
$(window).bind('resize', function (){
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function(){
console.log("窗口发生改变了哟！");
} , 500);
});
通过增加定时器的方式来让代码延迟执行，这样每次窗口改变的时候，我们都清除事件，只有当他停下来之后，才会继续执行。这个方法虽然可以解决resize执行多次的问题，但是感觉还不够完美。
wresize插件：
(function($) {
$.fn.wresize = function(f) {
version = '1.1';
wresize = {
fired : false,
width : 0
};
function resizeOnce() {
if ($.browser.msie) {
if (!wresize.fired) {
wresize.fired = true;
}else{
var version = parseInt($.browser.version, 10);
wresize.fired = false;
if (version < 7) {
return false;
} else if (version == 7) {
// a vertical resize is fired once, an horizontal resize
// twice
var width = $(window).width();
if (width != wresize.width) {
wresize.width = width;
return false;
}
}
}
}
return true;
}
function handleWResize(e) {
if (resizeOnce()) {
return f.apply(this, [ e ]);
}
}
this.each(function() {
if (this == window) {
$(this).resize(handleWResize);
} else {
$(this).resize(f);
}
});
return this;
};
})(jQuery);
这是在网上找到一个jquery插件源码，你可以把他另存为jquery.wresize.js，然后在你的页面引用，并执行以下操作。
function sayHello() {
console.log("窗口发生改变了哟！");
}
$(window).wresize(sayHello);
相关文章