inkShio
@inkShio

Как выполнить скрипт один раз при resize?

Допустим, есть точки для mob, tab и desk.
mob это "<768"
tab это ">= 768" и "< 1024"
desk это "> 1024"

Получается при достижении tab надо один раз выполнить функцию, если окно изменилось и стало mob, опять надо выполнить функцию один раз и т.д.

Я сделал так
$(function() {
  var isDevice = "mob"; /* mob tab desk */

  $(window).on("resize", function() {
    var windowWidth = $(window).width();
    if (windowWidth < 768) {
      if (isDevice != "mob") {
        isDevice = "mob";
        console.log(isDevice);
      }
    } else if (windowWidth >= 768 && windowWidth < 1024) {
      if (isDevice != "tab") {
        isDevice = "tab";
        console.log(isDevice);
      }
    } else if (windowWidth >= 1024) {
      if (isDevice != "desk") {
        isDevice = "desk";
        console.log(isDevice);
      }
    }
  });
});


Это работает как надо, но возможно есть более лучший способ реализации?

ссылка на codepen.io
  • Вопрос задан
  • 60 просмотров
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
Ну, в принципе нормальное решение. Можно упростить
$(function() {
  var isDevice = "mob"; /* mob tab desk */

  $(window).on("resize", function() {
    var windowWidth = $(window).width();
    let newDevice = 'desk';
    if (windowWidth < 768) {
      newDevice = "mob";
    } else if (windowWidth < 1024) {
      newDevice = "tab";
    }
    if (isDevice !== newDevice) {
        // тут пишем код
        isDevice = newDevice;
    }
  });
});

UPD: вот более расширяемое решение.
const breakPoints = {
  mob: 768,
  tab: 1024,
};

const isDevice = "mob"; /* mob tab desk */

$(window).on("resize", function() {
  const windowWidth = $(window).width();
  const newDevice = Object.keys(breakPoints).find(
    key => breakPoints[key] > windowWidth
  ) || 'desk';
  
  if (isDevice !== newDevice) {
      // тут пишем код
      isDevice = newDevice;
  }
});

тут конечно можно еще добавить всякие штуки для кеширования, или debounce функцию.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
25 февр. 2020, в 15:49
10000 руб./за проект
25 февр. 2020, в 15:46
15000 руб./за проект
25 февр. 2020, в 15:19
25000 руб./за проект