解决Javascript中$(window).resize()多次执行
2017-05-06 14:35
1321 查看
有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配。这个时候,我们需要在窗口拖动的时候去执行代码。但是有些时候,执行的操作比较复杂,我们只希望在窗口拖动完毕之后,在执行代码,否则极容易造成浏览器假死状态,这个时候该如何解决呢。
这段代码在窗口拖动时会执行多次,如果执行的代码较复杂,极容易造成浏览器假死,对页面性能影响较大。
通过增加定时器的方式来让代码延迟执行,这样每次窗口改变的时候,我们都清除事件,只有当他停下来之后,才会继续执行。这个方法虽然可以解决resize执行多次的问题,但是感觉还不够完美。
wresize插件:
这是在网上找到一个jquery插件源码,你可以把他另存为jquery.wresize.js,然后在你的页面引用,并执行以下操作。
浏览器窗口发生改变
先来写一下窗口拖动时执行代码的函数,原生JS可用window.onresizeJquery可用
$(window).resize()。
window.onresize= function(){
console.log("窗口发生改变了哟!");
}
$(window).resize(function(){
console.log("窗口发生改变了哟!");
})
这段代码在窗口拖动时会执行多次,如果执行的代码较复杂,极容易造成浏览器假死,对页面性能影响较大。
解决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);
相关文章推荐
- 修复lte ie8 & chrome 下window 的resize 事件多次执行
- window.onresize 多次触发及其解决办法 - debounce
- window.onresize 多次触发及其解决办法 - debounce
- 如何处理 jQuery $(window).resize() 中的方法被多次执行的小问题
- 在IE6,IE7 中 window.onresize 被多次执行
- IE6浏览器下resize事件被执行了多次解决方法
- IE6浏览器下resize事件被执行了多次解决方法
- 解决在IE浏览器中JQuery.resize()执行多次的方法(转)
- 解决在IE浏览器中resize事件执行多次
- IE6/IE7/IE8 JQuery下resize事件执行多次的解决方法
- 修复ie8&chrome下window的resize事件多次执行
- 在IE浏览器中resize事件执行多次的解决方法
- 在IE浏览器中resize事件执行多次的解决方法
- window.onresize 多次触发的解决方法
- 解决在IE浏览器中resize事件执行多次
- 解决window.onresize事件多次调用问题
- window.onresize 多次触发的解决方法