Как сделать чтобы событие resize отработало один раз при изменении ширины экрана, т.е. при ширине < 768 вызываемая функция отработала один раз, если >768, то отрабатывала другая функция, но если снова пользователь изменял ширину меньше 768, то снова отрабатывала один раз вызываемая функция.
ресайз будет отрабатывать КАЖДЫЙ раз при изменении размера окна - просто в ней ставьте условие и все Код (Javascript): $(window).on('resize', function(e){ var w = $(window).width(); if(w >768 ) { console.log(">768"); } else { console.log("<=768"); } }
Благодарю за помощь, нашел решение: Код (Javascript): $(window).resize(function(){ var breakPoint = '768'; var className = 'owl-carousel'; var elementClass = '.myClass'; if ($(this).width() < breakPoint) { /* если ширина меньше 768, то добавляем ко всем элементам, имеющим класс myClass класс owl-carousel (если конечно у них их нет) */ $(elementClass).each(function(){ if (!$(this).hasClass(className)) { $(this).addClass(className); } }); } else { /* если ширина больше или равно 768, то удаляем у всех элементов, имеющих класс myClass класс owl-carousel (если конечно у них он есть) */ $(elementClass).each(function(){ if ($(this).hasClass(className)) { $(this).removeClass(className); } }); } }); $(window).resize(); Вопрос закрыт)
Если исходить из вами же поставленной задачи, то не нашли. Ключевая фраза: В вашем же решении, при каждом изменении ширины, каждый раз будет отрабатывать тот или иной сценарий. А не один раз при пересечении границы breakpoint. Если у вас не стоит цель замучить браузер, то лучше использовать метод matchMedia, своего рода Медиа-запросы в CSS. Смотрим примерчик. Код (Javascript): var mediaQuery = window.matchMedia("screen and (min-width: 768px)"); mediaQuery.addListener(checkWinWidth); checkWinWidth(mediaQuery); function checkWinWidth(mq) { if (mq.matches) { console.log('>768'); } else { console.log('<=768'); } }