While resize browser window counter variable value should be incremented by 1 value

Question

I am facing a problem whenever I resize the browser window by (CTRL+SHFT+M) or change the orientation of window. counter_ variable value increament by 4 or 7 instead of 1.

HTML:

<div id="my_element">
    <span id="text">0</span> window resize.
</div>

Script:

$(function () {
    var counter_ = 0;
    $(window).on('resize', function () {
        $('#text').text(++counter_);
    });
});

Output Should be:

0 window resize.

1 window resize.

2 window resize.

..

..

The `resize()` event is called once for every pixel the window is changed by. You may need to use a timer to debounce the effect if you only want to count an entire resize as one operation. — Rory McCrossan, Feb 08 '16 at 13:29
[JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?](http://stackoverflow.com/q/2854407/387194) — jcubic, Feb 08 '16 at 13:34
@RoryMcCrossan not for every pixel, for every repaint. If your browser decides to not repaint the page during resize, you might end up with one resize event only. OTOH, you can easily get multiple resize events for the same window size. — John Dvorak, Feb 08 '16 at 13:53

jcubic · Answer 1 · 2016-02-08T15:32:21.460

-1

Try:

$('#my_element').append('<span class="text">' + (counter_++) + '</span> window resize.');

As in this FIDDLE

edited Feb 08 '16 at 15:32

answered Feb 08 '16 at 13:31

jcubic

61,973
54
229
402

@JohnHascall how they can disappear? – jcubic Feb 08 '16 at 15:42
The person who created them deletes it. – John Hascall Feb 08 '16 at 15:43
@JohnHascall This fiddle is anonymous it can't be deleted. – jcubic Feb 08 '16 at 15:44
Also JSFiddle interface don't have delete option. – jcubic Feb 08 '16 at 15:46
Ok, points taken. But there is no guaranty that jsfiddle itself exists at all next year, next week, or even tomorrow. That, in general, not just for jsfiddle, is the reason that putting the answer in the answer and not off at some other site is preferred. – John Hascall Feb 08 '16 at 15:53
@JohnHascall but it's better to include example that work instead of the one that don't, like with stack snipets that have resize event. – jcubic Feb 08 '16 at 15:57

While resize browser window counter variable value should be incremented by 1 value

1 Answers1