Как в JS или в jQuery отследить точку перехода от одной ширине окна к другой?

Question

[weranda]

Сейчас для изменения того или иного свойства, к примеру, простого добавления или удаления класса HTML тега при той или иной ширине окна браузера использую такую конструкцию:

$( window ).resize(function () {
    var bodyWidth = $('body').width();
    if (bodyWidth < 500) {
        $('h1').removeClass('big');
        $('h1').addClass('min');
    } else {
        $('h1').removeClass('min');
        $('h1').addClass('big');
    }
});

Мне кажется, что это неправильный подход, но пока приходится выкручиваться именно таким образом. При каждом изменении ширины окна браузера рассчитывается ширина body и применяются методы/свойства в логических условиях. Следуя этому примеру, при многократном изменении ширины браузера в пределах от 0 до 500px, первое условие все равно так или иначе будет каждый раз срабатывать.

Я даже не знаю как сформулировать запрос к ПС правильно по этой теме, чтобы не тревожить вас. Суть вопроса/проблемы заключается в том, чтобы "уловить" конкретный момент перехода от одной ширины к другой и применить условие только единожды при данной ширине окна браузера, т.е. чтобы в пределах заданного диапазона (к примеру, до 500px) правило не срабатывало при каждом изменении ширины, даже на 1px. Я понимаю, что можно задать вложенное условие с проверкой наличия того или инога класса и получить еще большую кашу в коде и голове, но чувствую, что что-то тут не так.

P.S.
Не пишите пожалуйста о том, что в этом случае надо использовать CSS. Привел пример только лишь для наглядности и понимания сути проблемы.

Comments

[Андрей Токмаков]

а чем собственно @media не подходит?

[sim3x]

Суть проблемы не ясна

Для изменения поведения класов не нужно использовать жс

[weranda]

Андрей Токмаков: Тем, что хочется понимания того, как реализовать сей алгоритм работы на JS для других задач.

[weranda]

sim3x: Давайте представим, что вместо указанного примера, существуют более сложные и в большом количестве разные функции. Мы открываем страницу с шириной окна браузера в 400px, срабатывают 50 функций. Уменьшаем ширину окна браузера до 300px, опять же срабатывают эти же самые функции. Как сделать так, чтобы при изменении ширины окна браузера в пределах до 500px эти функции не срабатывали бы постоянно. Как-то так.

[sim3x]

weranda: не виже ни одной функции, которой нужно срабатывать при изменении размера вьюпорта

[weranda]

sim3x: А их и нет в примере, но вы представьте их существование)

[Андрей Токмаков]

я вот тоже не понял зачем это, но в ответы кинул пару ссылок из гугла

[sim3x]

weranda: к сожалению, я не могу представить такой говнокод

Нужен конкретный пример

[weranda]

Андрей Токмаков: Спасибо. Ознакомлюсь.

[weranda]

sim3x: Вот вам конкретный пример с той же сутью вопроса:

function a() {
    alert('<500');
}

function b() {
    alert('>500');
}

$(window).resize(function () {
    var bodyWidth = $('body').width();
    if (bodyWidth < 500) {
        a();
    } else {
        b();
    }
});

[sim3x]

weranda: такое делается через цсс

Нужен пример, где цсс не справляется

[weranda]

sim3x: Вы прям капитан очевидность)
Чуть подправил функции.

Answer 1

[Андрей Токмаков]

https://habrahabr.ru/post/318972/
https://danilin.biz/media-query-in-jquery.htm

Comments

[Negwereth]

Ёлки, точно, matchMedia!

Answer 2

[Negwereth]

Ставь флаг, когда первый раз ширина уходит за 500px. Когда становится больше - чисть флаг для меньшей ширины и выставляй для большей.

Comments

[weranda]

Negwereth А можно поподробней о флагах. Открыл Google, поискал, нашел только информацию, относящуюся к регулярным выражениям. Можно конкретный пример привести?

[Negwereth]

weranda: переменную логическую, isWiderThan500, например.

let isWiderThan500 = true;
$( window ).resize(function () {
    var bodyWidth = $('body').width();
    if (bodyWidth < 500 && isWiderThan500) {
        isWiderThan500 = false;
        $('h1').removeClass('big');
        $('h1').addClass('min');
    } else if (bodyWidth >= 500 && !isWiderThan500) {
        isWiderThan500 = true;
        $('h1').removeClass('min');
        $('h1').addClass('big');
    }
});