Why does the jQuery resize event fire twice?

Question

I just noticed that the jquery resize event fires twice any time the browser window is resized. I'm unable to find any documentation listing this as the default behavior. I have tested this in the latest versions of Chrome and Firefox, using jQuery 1.4 and 1.5.

Does anyone else see this behavior? Is there a specific reason for it?

Update: This happens if I click the maximize button on the browser window once. I understand that if I'm manually dragging the window to a different size, the event will be fired multiple times, but that shouldn't be the case with the maximize button.

The code used test this is below. The browser resized text is output twice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script type="text/javascript">
    $(window).resize(function(){
        console.log('Browser Resized');
    });
</script>
<body>

</body>
</html>

Gut feel, and this is **really** just a gut feel, is that resizing an object changes both its length & width. Mayhap the "resize" event fires for the change on each axis? — tobias86, Apr 04 '11 at 06:46
I think it fires twice when the page loads because the event is instantiated before the elements are parsed by the browser. The resize event fires when the elements are created. Just a theory but possible. What do you think? — www139, May 14 '16 at 03:34

score 11 · Answer 1 · edited May 23 '17 at 12:15

11

JQuery: How to call RESIZE event only once it's FINISHED resizing?

Shows at least others are having this issue. In 1.3.2 it was listed as a bug because of something with the events system: http://benalman.com/code/projects/jquery-resize/docs/files/jquery-ba-resize-js.html

edited May 23 '17 at 12:15

Community

1
1

answered Apr 04 '11 at 03:51

jnpdx

45,847
6
64
94

h--n · Accepted Answer · 2011-12-12T11:02:21.737

10

This is not a problem of jQuery. It depends on the browser implementation. The browser decides when to trigger 'resize'. And you can use window.onresize = function() {...} to test. It will be same. Nothing to do with jQuery. I tested on Win7 chrome, it is fired twice, and in Win7 opera/safari it's fired once.

edited Dec 12 '11 at 11:02

answered Dec 02 '11 at 11:32

h--n

5,903
4
31
32

I just tested in opera 11.52 and the event is fired twice on my machine. – Mark Brown Dec 02 '11 at 16:26
2

How did you test it? Mine is Opera 11.52, Win7, and I resize the window by toggling the maximize button. It's also only called once in Safari 5.11. And with Mac OS 10, safari, the resize event is fired multiple times(much more than 2) when clicking the maximize button. It's a matter of implementation. The browser decides when to trigger 'resize'. And you can use window.onresize = function() {...}. It is same. Nothing to do with jQuery :) – h--n Dec 05 '11 at 12:51

Etienne Martin · Answer 3 · 2019-06-26T14:51:09.153

4

Here's a simple solution to the problem using setTimeout.

jQuery

var resizeTimeout
$(window).resize(function(){
    clearTimeout(resizeTimeout)
    resizeTimeout = setTimeout(function(){
        console.log("resized")
    },100)
});

JavaScript

let resizeTimeout;
window.addEventListener("resize", () => {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(console.log, 100, "Resized");
});

edited Jun 26 '19 at 14:51

answered Aug 10 '17 at 15:26

Etienne Martin

10,018
3
35
47

Hender · Answer 4 · 2020-03-10T16:32:36.537

This problem seems not to be tied neither jquery nor browser implementation. In fact if you run the second function which is javascript pure function the glitch occur too. A possible solution is, get out into a separate window the DevTools docker doing so most of the times you will not get double fire the resize event. I though that was because when the window resize, the Devtool docker resize too and triggered the resize event but it is not conclusive apparently. You can try this code without console.log.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
        <html>
            <head>
                <title></title>

                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
            </head>

            <style>
                body {
                    height: 1000px;
                }
            </style>

            <script type="text/javascript">
                count=0
                $(window).resize(function(){
                    count++
                    document.body.innerHTML = 'Browser Resized ' + count
                    //console.log('Browser Resized ' + count);
                })
            </script>

            <!--script type="text/javascript">
              count=0
              window.addEventListener( 'resize', function(){
                  count++
                  document.body.innerHTML = 'Browser Resized ' + count
                  //console.log('Browser Resized ' + count);
              })
            </script-->
            <body>
            </body>
</html>

This is what was exactly happening to me. I had the console attached to the same window, which was triggering the resize event twice. As soon as a move to its own window the resize is only triggered once. Note, I had chrome in device mode and all you have to do is trigger the orientation change from landscape to portrait. For some reason, portrait to landscape only triggers resize once. — leroyjenkinss24, Apr 27 '21 at 20:05

score -1 · Answer 5 · edited Nov 09 '15 at 01:36

I tested the present case, and I get two calls as well. So I think, etc... is this a bug, is it not, is it a before/after clustered function call... And I go back to JQuery ' documentation for resize() :

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).

Any other word necessary?

Why does the jQuery resize event fire twice?

5 Answers5

Linked