The window resize event is constantly triggered in ie7

Question

Old name: setTimeout throttle on window resize event in javascript constantly fires in ie7

I have the following script :

jQuery(document).ready(function(){ throttleTest(); }); function throttleTest() { var throttleTimer, testCount = 1; jQuery(window).on({ "resize": function(){ clearTimeout(throttleTimer); throttleTimer = setTimeout(function() { jQuery("ul.testList").prepend("<li>Prepended list item number: " + testCount + "</li>"); testCount++; }, 500); } }); }; 

And the following HTML :

 <ul class="testList"> </ul> 

Using the setTimeout method for throttle, he should only add a list item to testList ul as soon as the user stops resizing his browser for 500 ms. Basically, it only runs setTimeout code once every time the browser is resized due to clearTimeout before it is installed. This method allows you to use the code only if necessary, and not at every resize event, which can be dozens of times when the user resizes his browser.

This works in all browsers except ie7. In Bizerrely in ie7, the code continues to work and stops stopping adding list items to ul.

I created a demo here: http://jsfiddle.net/cQRjp/

Take a look at ie7 and you will see the problem. Does anyone know why this fails in ie7?

EDIT No: 1:

I deleted the code so that when the window was resized, the li element was added to the ul element on the page, and then the counter increased. What is it.

This indicates that the problem is how ie7 interprets the resize event, has nothing to do with the throttle timer. It seems that adding the li element to the page triggers a resize event in ie7, so resizing runs continuously. Here I installed a new demo: http://jsfiddle.net/gnKsE/ Warning: this link will crash your ie7 browser.

One solution that I can think of is to disable the resize event right after it fires, and then set it back again after I run the code inside it. For instance:

 jQuery(document).ready(function(){ functionName(); }); function functionName() { var throttleTimer, testCount = 1; function turnOnResize() { jQuery(window).on({ "resize.anyname": function(){ jQuery(window).off(".anyname"); jQuery("ul.testList").prepend("<li>Resize event: " + testCount + "</li>"); testCount++; setTimeout(function() { turnOnResize(); }, 50); } }); } turnOnResize(); }; 

Answer 1

Another solution would be to check the resize handler to see if the width of the window has changed. This way, you can ignore resize events that were not triggered by the window resizing. See also: fire window.resize event in Internet Explorer

Try something like this:

 jQuery(document).ready(function($){ var lastWindowHeight = window.innerHeight, // Could use $(window).height() but $(window) is expensive lastWindowWidth = window.innerWidth, testCount = 1; // Handles all resize events (which for IE7 includes when _anything_ in the DOM is resized) function resizeHandler() { if (lastWindowHeight !== window.innerHeight || lastWindowWidth !== window.innerWidth ) windowResizeHandler.apply(this, arguments); } // Handles resize events that result from the window changing size function windowResizeHandler() { lastWindowHeight = window.innerHeight; lastWindowWidth = window.innerWidth; $("ul.testList").prepend("<li>Resize event: " + testCount + "</li>"); testCount++; } $(window).on("resize", resizeHandler); });