Window resize event fires twice in jQuery

Question

I ran the below code

$(document).ready(function() {

    var ivar = 0;

    $(window).resize(function() {
        console.log('$(window).height() ' + $(window).height() + ' - ' + ++ivar);
    });
});​

whenever i resize i found the event was firing twice i.e. the counter 'ivar' is incremented twice.

Can any one advise me whats happening in the resize event that makes the counter to get incremeted twice

**Edit: 1. I'm resizing the window by double-clicking on the window bar.

---

Thanks

Answer 1

That's the very well known problem. In some browsers resize is called twice. We can create timer so it will call our function only when the user stops resizing the window. Here's how you can do it:

var globalTimer = null;

$(window).resize(function() {
    clearTimeout(globalTimer);
    globalTimer = setTimeout(doneResize, 500);
});

function doneResize(){
  console.log('$(window).height() ' + $(window).height() + ' - ' + ++ivar);   
}​