Как создать промежуточную переменную в $(window).resize?

Question

sunnyrio @sunnyrio

JavaScript

Как создать промежуточную переменную в $(window).resize?

Есть код который меняет ссылку на картинку при выполнении условия, он делает это постоянно если окно браузера меняется и равно больше 560px, как добавить промежутучную переменную чтобы ограничить постоянно выполнение кода?

$(window).resize(function() {
	let resizeWidth = $(window).width();
	
	if(resizeWidth > 560) {
		$('#img-1').attr("href","../css/images/image-1-1000.jpg");
		$('#img-1 > .block-8_container_images_border__image').attr("src","../css/images/image-1-500.jpg");	
		$('#img-2').attr("href","../css/images/image-2-1000.jpg");
		$('#img-2 > .block-8_container_images_border__image').attr("src","../css/images/image-2-500.jpg");	
		$('#img-3').attr("href","../css/images/image-3-1000.jpg");
		$('#img-3 > .block-8_container_images_border__image').attr("src","../css/images/image-3-500.jpg");	
		$('#img-4').attr("href","../css/images/image-4-1000.jpg");
		$('#img-4 > .block-8_container_images_border__image').attr("src","../css/images/image-4-500.jpg");	
		$('#img-5').attr("href","../css/images/image-5-1000.jpg");
		$('#img-5 > .block-8_container_images_border__image').attr("src","../css/images/image-5-500.jpg");	
		$('#img-6').attr("href","../css/images/image-6-1000.jpg");
		$('#img-6 > .block-8_container_images_border__image').attr("src","../css/images/image-6-500.jpg");	
	}
});

Вопрос задан более трёх лет назад
66 просмотров

4 комментария

Подписаться 1 Простой 4 комментария

Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

Какое условие должно быть, чтобы НЕ выполнялся код? и зачем вам переменная, в конструкцию if добавьте условие, при которых он НЕ/Будет выполняться

Написано более трёх лет назад
vouvouvotche @vouvouvotche

если ответить на вопрос, то сделайте hof и храните переменную до возвращаемой функции.
```
$(window).resize((function() {
let isImageShown = false;
return function() {}
})());
```
Лень все писать, но вы справитесь. Так же лучше добавить debounce.
А если подумать не справится ли с вашей задачей media query и скрытие ссылок/картинок при ширине больше/меньше 560?

Написано более трёх лет назад
sunnyrio @sunnyrio Автор вопроса

vouvouvotche, как в медиа src менять у img, такое возможно?

Написано более трёх лет назад
sunnyrio @sunnyrio Автор вопроса

Шохрух Шаймардонов, нужно чтобы условие выполнилось 1 раз а в дальнейшем не выполнялось так как нету смысла

Написано более трёх лет назад

Какое условие должно быть, чтобы НЕ выполнялся код? и зачем вам переменная, в конструкцию if добавьте условие, при которых он НЕ/Будет выполняться
если ответить на вопрос, то сделайте hof и храните переменную до возвращаемой функции.
```
$(window).resize((function() {
let isImageShown = false;
return function() {}
})());
```
Лень все писать, но вы справитесь. Так же лучше добавить debounce.
А если подумать не справится ли с вашей задачей media query и скрытие ссылок/картинок при ширине больше/меньше 560?
vouvouvotche, как в медиа src менять у img, такое возможно?
Шохрух Шаймардонов, нужно чтобы условие выполнилось 1 раз а в дальнейшем не выполнялось так как нету смысла

Answer 1 · 2019-12-11 11:12:24

Всё очень просто, используйте декоратор debounce.

$(window).resize(
    debounce(function () {
      let resizeWidth = $(window).width();
      let img_count = 6;
      if (resizeWidth > 560) {
        for (let i = 1; i <= img_count; i++) {
          $('#img-' + i).attr("href", "../css/images/image-" + i + "-1000.jpg");
          $('#img-' + i + ' > .block-8_container_images_border__image').attr("src", "../css/images/image-" + i + "-500.jpg");
        }
      }
    }, 500))

  function debounce(func, wait, immediate = false) {
    let timeout;
    return function () {
      let context = this, args = arguments;
      let later = function () {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      let callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };

Как создать промежуточную переменную в $(window).resize?

Войдите на сайт