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

Question

[inkShio]

Допустим, есть точки для 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

Answer 1

[Владимир Проскурин]

Ну, в принципе нормальное решение. Можно упростить

$(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 функцию.