Как оптимизировать код js?

Question

[McThinker]

Приветствую. Есть куча товаров на странице, скажем до 200 $('.my-orders'). Если открыта соседняя вкладка и статус товара меняется, мне его нужно удалить в другой вкладке ну и убрать регламент у него. По этому пишу в localStorage "changeReglament", ну и хожу каждые 10 сек проверяю появился ли статус по этому заказу в localStorage
Насколько такой подход правильный и не будет ли each жрать память?

setInterval(function () {
    if (localStorage.getItem('changeReglament') !== null) {
      let getChange = localStorage.getItem('changeReglament');
      getChange = JSON.parse(getChange);
      for (var key in getChange) {
        $('.my-orders').each(function () {
          let orderId = $(this).find('.id-orders').text();
          if(orderId === key) {
            console.log('remove')
          }
        })
      }
    }
  }, 10000)

Comments

[Михаил Федотов]

А почему бы в localStorage не положить данные, которые содержат только id товаров, у которых статус поменялся?
И тогда не надо будет каждые 10 секунд делать each на 200 товаров.

Если id добавлен. Взять id - поменять статуса у этого товара. Удалить этот id из localStorage.

Отвечая на вопрос - жрать память особо не станет, но практика это плохая и нужно искать более оптимизированные методы.

[McThinker]

Михаил Федотов,

А почему бы в localStorage не положить данные, которые содержат только id товаров, у которых статус поменялся?

так и есть, ложу только те у которых поменялся
Но опять же, нужно пройтись по 200 товарам которые на странице...
По удалению да. буду удалять.

[Михаил Федотов]

McThinker, тогда все намного проще.
Не нужно делать each на 200 товаров. Можно найти товар по другим критериям.

let item_by_id = document.getElementById("your_item_id"); // поиск элемента по id
let item_by_data_attribute = document.querySelector("[data-attributeName=attribute_value]"); // поиск элемента по data-attributeName. Например <div data-productID="8621">...</div>

Идея в том, чтобы искать напрямую, не перебирая каждый через each.

[McThinker]

Михаил Федотов, добавил дата атрибут. Почему то сразу не подумал, что действительно проще искать чем перебирать

[Михаил Федотов]

McThinker, рад помочь

Answer 1

[McThinker]

Переписал так:

window.addEventListener('storage', event => {
    if (event.key === 'changeReglament') {
      let getChange = localStorage.getItem('changeReglament');
      getChange = JSON.parse(getChange);
      for (var key in getChange) {
        $('.my-orders[data-id="' + key + '"]').remove();
      }
    }
  })

спасибо всем

Answer 2

[Надим]

Для отслеживания хранилища есть специальное событие:

window.addEventListener('storage', function(events) {
    console.dir(events);
});

StorageEvent вызывается каждый раз, когда произошло изменение в localStorage. Это не работает на странице, которая вносит изменения, но срабатывает на открытых страницах домена в броузере. То есть, данное событие оповещает открытые вкладки одного сайта о произошедшем событии.

Источник: https://itnan.ru/post.php?c=1&p=317586

Answer 3

[lrsvolk]

Посмотри в эту сторону

Comments

[Михаил Федотов]

Здесь поддержка страдает.
https://caniuse.com/#feat=broadcastchannel