Отловить событие resize для одного значения

[kvizor34]

Здравствуйте уважаемый форумчане!
Задача состоит в том чтобы выполнить некую функцию тогда и только тогда когда событие window.resize прошло порог в 1440px (туда или обратно). Логично было написать такую штуку:

$(window).resize(function () {
        if($(window).width()===1440){
            //my actions
        }
    })

Но, как оказалось, ресайз может оказаться весьма резким, и нужное мне значение просто будет пропущено.

З.Ы.
Я знаю что этот пост будут читать "особо умные" пользователи, которым непременно расскажи "всю суть задачи, и вообще я не понимаю зачем такое реализовывать", поэтому немного объясню.
Есть самописная карусель, которая в адаптивной версии сайта требует перезагрузки страницы, для того чтобы загрузиться ещё раз, с новыми значениями, и адекватно работать дальше. Точно так-же при переходе из "адаптивной" версии в "десктопную" нужна перезагрузка страницы. Порог "адаптива" состовляет как раз 1440px. И я хочу при его прохождении обновлять дом-узел с каруселькой.

[Dilettante_Pro]

<div id="result"></div>
<div id="current"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var oldDelta = $(window).width() - 1440, oldSign = oldDelta / (Math.abs(oldDelta)|| 1), newDelta, newSign;
$(window).resize(function () {
        newDelta = $(window).width() - 1440, newSign = newDelta / (Math.abs(newDelta)||1);
        current.textContent = newDelta;
        if(oldSign != newSign){
            result.innerHTML += ((oldSign < 0)?"Bigger":"Less") + "<br>";
            oldSign = newSign;
        }
    })
</script>

[SuperZen]

@mediaquery проще ) https://www.w3schools.com/css/tryit....eries_fontsize

тогда обе разметки должны быть на странице, просто при одном размере показываем одну, при другом другую. или смиксовать что-то среднее )

[j0hnik]

Вы чего ребята ? есть событие для этого

window.matchMedia('(min-width: 1440px)').addListener(e=>console.log('отметка пройдена'));

[kvizor34]

<div id="result"></div>
<div id="current"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var oldDelta = $(window).width() - 1440, oldSign = oldDelta / (Math.abs(oldDelta)|| 1), newDelta, newSign;
$(window).resize(function () {
        newDelta = $(window).width() - 1440, newSign = newDelta / (Math.abs(newDelta)||1);
        current.textContent = newDelta;
        if(oldSign != newSign){
            result.innerHTML += ((oldSign < 0)?"Bigger":"Less") + "<br>";
            oldSign = newSign;
        }
    })
</script>

Сложный вариант, но попробую если остальные не подойдут, спасибо.

@mediaquery проще ) https://www.w3schools.com/css/tryit....eries_fontsize

тогда обе разметки должны быть на странице, просто при одном размере показываем одну, при другом другую. или смиксовать что-то среднее )

Два одинаковых слайдера на странице, как вариант, но я не буду так засирать DOM.

window.matchMedia('(min-width: 1440px)').addListener(e=>console.log('отметка пройдена'));

Вот это варик) сейчас испробую, спасибо.

[j0hnik]

только вот так укажите
max-width: 1440px

[SuperZen]

Сложный вариант, но попробую если остальные не подойдут, спасибо.


Два одинаковых слайдера на странице, как вариант, но я не буду так засирать DOM.


Вот это варик) сейчас испробую, спасибо.

а делать перезагрузку страницы, это выход...)

можно одни и те же блоки использовать...

[kvizor34]

только вот так укажите
max-width: 1440px

Спасибо Джоник!) ты меня уже 4й раз выручаешь))
Вопрос решён. Тема закрыта.