Как определить пересечение границы breakpoint'ов?

Question

[Dymok]

Есть два брейкпоинта: 1200px и 478px
При изменении размера экрана нужно выполнять определенное действие, сейчас работает так:

$(window).on('resize', function() {
if ($(window).width() > 1200) {
    //Больше 1200px
} else if ($(window).width() < 1200 && $(window).width() > 478) {
    //Меньше 1200px и больше 478px
} else {
    //Меньше 478px
}
});

Но оно выполняется при каждом изменении размера экрана, даже если не переходит ни одну границу брейкпоинтов.
Нужен вариант, при котором код будет выполняться только при изменении с 1201 на 1199, например, но не с 1201 до 1300.
Предполагаю, что нужно как-то сравнивать текущую и предыдущую ширину экрана, но не понимаю как именно это организовать

Answer 1

[Сергей delphinpro]

https://developer.mozilla.org/ru/docs/Web/API/Wind...

Comments

[Dymok]

А как с их помощью отследить именно то, что совпадающий breakpoint сменился?

[Сергей delphinpro]

Dymok, Они срабатывают только когда брикпойнт сменится.

[Dymok]

Сергей delphinpro, пробую -https://codepen.io/UnluckySerivelha/pen/LYYqRMa , срабатывает при любом изменении размера экрана.
Если убрать $(window).resize(), то срабатывает только при загрузке

[Сергей delphinpro]

Dymok, не, с ними так не делают.
Вот здесь посмотрите пример с addListener https://developer.mozilla.org/ru/docs/Web/CSS/Medi...

Answer 2

[Ice]

Можно создать глобальную переменную и используйте ее как доп. обертку для проверки.
При входе в зону записывать значение. Далее, если значение совпадает, в таком случае код не выполнять.
Простой пример логики:

let memory = 0;
if ($(window).width() > 1200) {
   memory == 1200 
      return;

   memory = 1200;
   //Больше 1200px
}