window.resize in jQuery firing multiple times
I have the following JavaScript/jQuery code in an HTML file:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"
type="text/javascript"></script>
<script language="javascript">
$(window).resize(function(){alert('hi');});</script>
</head>
<body>
resize me
</body>
</html>
It appears relatively straightforward, however when I resize the browser window, I get two su开发者_Python百科ccessive alert windows on Chrome and IE9 and I seemingly crash Firefox5.
What am I missing? Is it one fire per dimension (x/y)?
You got it, some browsers fire on resize start and again on end while others like FF fire continuously. Solution is to use setTimeout to avoid firing all the time. An example can be found here. Here is the code from the same reference:
(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...
});
here's a simple example, if the user stops resizing for 500ms (half a second) you function will fire. the clearTimeout prevents the constant refire of your function. you can adjust this value as you see fit. 500ms may be too soon, you might bump it to 1000, depends on what you are doing inside the function
var resizeTimeout;
$(window).resize(function(){
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function(){
alert('your function to run on resize');
}, 500);
});
Seems like this is a browser-specific quirk. According to the documentation for the resize event:
Code in a resize handler should never rely on the number of times the handler is called. Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).
(emphasis mine)
A workaround would be to set a timer and check to see if the dimensions of the window have changed.
Browsers don't fire the resize event consistently. To avoid it firing constantly, usually a setTimeout is used. Here's some more on that:
JQuery: How to call RESIZE event only once it's FINISHED resizing?
JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?
加载中,请稍侯......
精彩评论