Stop/start window resize when viewport width reaches some value

Question

The goal

If user's viewport reaches some value, I need to stop or start:

jQuery(window).on('resize'){ // ... }

The scenario

Let's suppose that we have the following array (in JavaScript):

var ranges = [1024, 1280];

I'm using jQuery(window).on('resize'){} with some ifs inside to do things when user's viewport raches a width between the values set by ranges' array.

But I just want to run those "things" when the viewport is out or in range with the widths from the array. I mean, jQuery(window).on('resize'){} should stop to run when the user's viewport is between 1024px x 1280pxof width, but its need to wake up when the viewport is out of range to do another thing that I want.

Playground

To have a better comprehension of the problem, open your console and take a look in this jsFiddle.

You'll see that the console prints "Hi" for each time that jsFiddle JavaScript's Window has its width changed, and I want to display it once.

Oh my god, are you stupid?! Your script is wrong because nothing is printing here. Calm down, fella! jsFiddle doesn't interpret $(window) as your browser's window. To run the function, you should to resize result window. Look:

What I'm expecting, actually

Based on the above's script, I want to see Hi! just when the viewport enters in some width between 1024px x 1280px — once. When the viewport is outside, nothing happens, but when viewport enters in the specified width again, prints Hi! — again and once.

What have I tried?

Actually, I'm stuck. My mind can't think in the solution — I need a light!

Doubts? I haven't made clear enough?

Comment your question, please!

Duplicated?

Post the link or marks as duplicate — I didn't saw any similar topic like this before (sorry for this).

Answer 1

You just need to keep track of the state. Here's a Fiddle that I think does what you want:

var isInRange = (function() {
    var test = function() {
        return $(window).width() >= 1024 && $(window).width() <= 1280;
    };
    var current = test();
    return function() {
        if (test()) {
            if (!current) {
                current = true;
                console.log('Hi!');
            }
        } else {
            current = false;
        }
    }
}())

$(window).on('resize', isInRange);

---

Update

Okay, after all these comments, I'm really not happy with the code as written. Here's another version of the same ideas, cleaning up some of the code and adding the onExit functionality too:

var isInRange = (function() {
    var $window = $(window);
    var test = function() {
        var ww = $window.width();
        return ww >= 1024 && ww <= 1280;
    };
    var inRange = test();
    var onEnter = function() {
        console.log("Hi");
    };
    var onExit = function() {
        console.log("Bye");
    };
    return function() {
        test() ? (!inRange && (inRange = true) && onEnter())
               : ((inRange && onExit()) || (inRange = false));
    };
}())

$(window).on('resize', isInRange);

It's a little more clean, a little more organized, and slightly more efficient. But nothing really substantive has changed.

Answer 2

You'll need to use a flag to keep track of the state, I've updated your JSFiddle as follows:

var inRange;

function isInRange() {
    if ($(window).width() >= 1024 && $(window).width() <= 1280){
        if (!inRange){
            inRange = true;
            console.log('Hi!');
        }   
    } else {
        inRange = false;
    }
}

$(window).on('resize', isInRange).trigger('resize');

EDIT

To show a different message only once depending on whether the window is inside or outside the set range, simply keep track of two states with flags like so:

var inRange, outsideRange;

function isInRange() {
    if ($(window).width() >= 1024 && $(window).width() <= 1280){
        outsideRange = false;

        if (!inRange){
            inRange = true;
            console.log('Hi!');
        }
    } else {
        inRange = false;

        if (!outsideRange){
            outsideRange = true;
            console.log('Bye!');
        }
    }
}

$(window).on('resize', isInRange).trigger('resize');

Here is the updated JSFIddle.

I hope this helps!