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

Question

[sunnyrio]

Есть код который меняет ссылку на картинку при выполнении условия, он делает это постоянно если окно браузера меняется и равно больше 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");	
	}
});

Comments

[Шохрух Шаймардонов]

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

[vouvouvotche]

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

[sunnyrio]

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

[sunnyrio]

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

Answer 1

[Шохрух Шаймардонов]

Пробуйте так

$(window).resize(function() {
  let resizeWidth = $(window).width();
  
  if(resizeWidth > 560 && localstorage.getItem('resized')) {
    localstorage.setItem('resized', 'true');
    $('#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");	
  }
});

Answer 2

[RMate]

Всё очень просто, используйте декоратор 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);
    };
  };

Comments

[sunnyrio]

Интересная функция, но у меня загвоздка в том что - при открытии браузера с разрешением в 560 пикселей и меньше загружается один путь до изображения (до маленького), но если есть возможность после этого увеличить ширину браузера то путь до изображения нужно поменять (на большее) при увеличении ширины и сделать это надо единожды так как если в обратную сторону уменьшать -> подгруженно уже большое изображение и изображение меньшего размера не нужно так как достаточно лишь изменить свойства длины и ширины уже имеющегося.

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

[RMate]

sunnyrio, Как я понял из вашего описания, вам достаточно сделать флаг-глобальную переменную, которая и будет служить ограничителем.

$(document).ready(function(){
var is_full = false;

$(window).resize(function() {
   let resizeWidth = $(window).width();
      if (resizeWidth > 560 && is_full == false) {
          is_full = true;
          // code
      }
})
})

[sunnyrio]

RMate, А если этот кусок кода находиться в одном файле .js

$(document).ready(function(){
var is_full = false;
})

А этот кусок в другом файле .js

$(window).resize(function() {
   let resizeWidth = $(window).width();
      if (resizeWidth > 560 && is_full == false) {
          is_full = true;
          // code
      }
})

Они взаимосвязанно будут работать?

[RMate]

sunnyrio, да, это глобальная переменная.