在jquery中多次触发window.resize
我在HTML文件中有以下javascript / jquery代码：
$(window).resize(function(){alert('hi');}); resize me 它看起来相对简单，但是当我调整浏览器窗口大小时，我在Chrome和IE9上连续两个警报窗口，我看起来崩溃了FF5。
我错过了什么？ 每个尺寸（x / y）是一个火吗？
你知道了，有些浏览器会在resize时启动并再次启动，而其他浏览器则会持续启动。 解决方案是使用setTimeout来避免一直触发。 这里有一个例子。 以下是来自相同参考的代码：
(function($,sr){ // debouncing function from John Hann // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ var debounce = function (func, threshold, execAsap) { var timeout; return function debounced () { var obj = this, args = arguments; function delayed () { if (!execAsap) func.apply(obj, args); timeout = null; }; if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; } // smartresize jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })(jQuery,'smartresize'); // usage: $(window).smartresize(function(){ // code that takes it easy... });
这是一个简单的例子，如果用户停止resize500ms（半秒），你的function将会激活。 clearTimeout可以防止你的函数不断重写。 您可以根据需要调整此值。 500ms可能太快，你可能会把它提高到1000，取决于你在函数内做了什么
var resizeTimeout; $(window).resize(function(){ clearTimeout(resizeTimeout); resizeTimeout = setTimeout(function(){ alert('your function to run on resize'); }, 500); });
似乎这是一个特定于浏览器的怪癖。 根据resize事件的文档：
resize处理程序中的代码永远不应该依赖于调用处理程序的次数。 根据实施情况，resize事件可以在resize正在进行时连续发送（在Internet Explorer和基于WebKit的浏览器（如Safari和Chrome）中的典型行为），或者仅在resize操作结束时发送一次（典型行为在其他一些浏览器，如Opera）。
（强调我的）
解决方法是设置计时器并检查窗口的尺寸是否已更改。
浏览器不会始终激活resize事件。 为了避免它不断触发，通常使用setTimeout。 这里有更多内容：
JQuery：只有在完成大小调整后才能调用RESIZE事件？
JavaScript / JQuery：$（window）.resize如何在resize完成后触发？