Убедитесь, что конкретный экземпляр функции setInterval выполняется только один раз

Question

Я работаю над div (родительским), который имеет два других div (меню и содержимое) следующим образом:

<div id="parent">
  <div id="menu"></div>
  <div id="content"></div>
</div>

Содержимое, загруженное в div содержимого, представляет собой HTML-файл с несколькими javascriptтакие функции, как автоматическое обновление, которое перезагружает содержимое каждые 5 секунд.

$(document).ready(function () {
  setInterval(function () {
    grid.reloadDefaultContent(); //this reloads the content on content div.
  }, 5000);
}

На странице есть несколько ссылок, которые загружают разное содержимое в div содержимого.Пока все хорошо, пока я не вернусь в «дом», который имеет функцию автообновления.Проблема в том, что автоматическое обновление никогда не прекращалось, и теперь, когда я щелкнул, чтобы вернуться домой снова, функция запускается дважды (или сколько раз я меняю страницу и возвращаюсь домой), после чего начинается сеанс.Я загружаю страницы, используя jQuery $.load().

Любые идеи о том, как сделать так, чтобы этот экземпляр setInterval запускался только один раз?

Edit: после прочтения моего собственного вопроса я увиделчто это было немного неясно.Моя главная проблема заключается в том, что когда я возвращаюсь домой, мой первый экземпляр setInterval уже запущен, и запускается второй, в результате чего автоматическое обновление выполняется за 5 секунд быстрее, и оно будет выполняться все быстрее и быстрее каждый раз, когда яизмени страницу и вернись домой.Это не то поведение, которое я хочу.Что мне нужно, это ОСТАНОВИТЬ экземпляр setInterval, когда я изменяю содержимое в div, и перезапустить его, когда я вернусь домой.

Answer 1

Это должно сделать это:

var interval; // make sure that is defined outside of the loaded div content
$(document).ready(function () {
    if (typeof interval != "number"){
         interval = setInterval(function () {
         grid.reloadDefaultContent();
  }, 2000);
    }
});

Он будет запускать только один экземпляр интервального таймера.

Answer 2

Если вы хотите, чтобы он запускался только один раз, почему бы просто не использовать вместо него setTimeout ()?

Попробуйте это:

$(document).ready(function () {
  if (!$('body').hasClass('refresh-started')) {
    setInterval(function () {
      grid.reloadDefaultContent(); //this reloads the content on content div.
    }, 5000);
    $('body').addClass('refresh-started');
  }
}

Другой альтернативой будет всегда перезапускать таймер вместо:

$(document).ready(function() {
  clearInterval($('body').data('refresh-interval'));
  $('body').data('refresh-interval', setInterval(function() {
    grid.reloadDefaultContent(); //this reloads the content on content div.
  }, 5000));
});

Какой из них лучше, зависит от ваших обстоятельств.

Answer 3

Не изменяя исходную страницу, которая выполняет setInterval, вам кажется, что единственным вариантом является взлом функции grid.reloadDefaultContent, чтобы она запускалась только один раз.Невозможно дать какие-либо рекомендации, не видя, как определяется grid.

Answer 4

Пользовательская функция jQuery .one()

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

$("#foo").one("click", function() {
  alert("This will be displayed only once.");
});

Answer 5

Если вы хотите, чтобы ваш код запускался только один раз, вы должны использовать setTimeout () , а не setInterval().