首页 > 代码库 > 解决Javascript中$(window).resize()多次执行
解决Javascript中$(window).resize()多次执行
有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配。这个时候,我们需要在窗口拖动的时候去执行代码。但是有些时候,执行的操作比较复杂,我们只希望在窗口拖动完毕之后,在执行代码,否则极容易造成浏览器假死状态,这个时候该如何解决呢。
浏览器窗口发生改变
先来写一下窗口拖动时执行代码的函数,原生JS可用window.onresize
Jquery可用$(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);
解决Javascript中$(window).resize()多次执行
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。