@sunnyrio

Как создать промежуточную переменную в $(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");	
	}
});
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 2
joeberetta
@joeberetta Куратор тега JavaScript
Читай: https://epdf.pub/google-for-dummies.html
Пробуйте так
$(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");	
  }
});
Ответ написан
@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);
    };
  };
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы