Блог

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

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

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

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

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

Есть идеи о том, как я могу заставить этот экземпляр setInterval запускаться только один раз?

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

Это должно сработать:

 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);
    }
});
  

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

Если вы хотите, чтобы он запускался только один раз, почему бы просто не использовать «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));
});
  

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

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

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

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

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

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