Задать вопрос
@angelzzz

Как запускать функции в зависимости от разрешения экрана и выключать предыдущие при ресайзе?

Пытаюсь в зависимости от размера экрана запускать разные функции. Чтобы результаты вычислений не влияли друг на друга, хотелось бы выключать их.

Вот пример кода https://jsfiddle.net/eqcxwddd/9/. Если посмтореть в консоле то видно, что сначала при ресайзе окна запускается одна функция, но если окно достигнет другого брейкпоинта, то запускается друга и они ВМЕСТЕ работают. И так же если дойти до третьего брейкпоинт. Мне нужно чтобы при достижении брейкпоинта все функции отключались и работала только та, которая должна работать.

Вот код:
function sticker1220() {  
	$(window).on("load resize scroll",function(){
		console.log('sticker1220');
    });
};

function sticker950() { 
	$(window).on("load resize scroll",function(){
		console.log('sticker950');
    });
};

function sticker320() { 
	$(window).on("load resize scroll",function(){
		console.log('sticker320');
    });
};

function checksize() {

	if ( $(window).width() > 1220 ) {
		sticker1220();
	} else if ( $(window).width() > 640 & $(window).width() < 1219 )  {
		sticker950();
	} else if ( $(window).width() < 639 ) {
		sticker320();
	}
};

checksize();
$(window).resize(function() {
checksize();
$('p').text($(window).width());
});
  • Вопрос задан
  • 808 просмотров
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
@R-Oscar
Если я всё правильно понял, Вам нужно что-то вроде этого
Ответ написан
e_snegirev
@e_snegirev
- Написать разные функции
- Отловить событие ресайза, узнать ширину страницы
- В зависимости от ширины выполнить функцию
- профит

Я только не понял в примере кода, зачем еще какие-то триггеры внутри функций?
Так работает же норм

function sticker1220() {
		console.log('sticker1220');
};

function sticker950() { 
		console.log('sticker950');
};

function sticker320() { 
		console.log('sticker320');
};

function checksize() {
	if ( $(window).width() > 1220 ) {
		sticker1220();
	} else if ( $(window).width() > 640 & $(window).width() < 1219 )  {
		sticker950();
	} else if ( $(window).width() < 639 ) {
		sticker320();
	}
};

checksize();
$(window).resize(function() {
checksize();
$('p').text($(window).width());
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы