Question

I would like to know if the following situation it’s possible. Let’s say I have the next $.resize() function:

$(window).resize(function(){
    if($(window).width() < 500) console.log('Small');
});

I know that the above will log Small as long as the size of the window is under 500. So this means if you resize your window from 500 to 200, the Small will be logged about 300 times.

Well, that means if you actually have some heavy function running under those circumstances, the browser might crash because it will run over and over again until you stop resizing or the circumstances change.

So that is why I’m asking if there would be a way to run that hypothetical function only at the first occurrence of the condition ?

Answer 1

Use the one event bind which runs the passed in function once only at the first occurrence of the event.

$(window).one("resize", function(){
    if($(window).width() < 500) console.log('Small');
});