Блог

Главная - Вопросы по программированию - Слишком быстрое выполнение setInterval

Слишком быстрое выполнение setInterval

#javascript #jquery

#javascript #jquery

Вопрос:

Существует так много хороших сообщений по этому вопросу после их собственного случая, но я не могу найти ни одного хорошего ответа в моем случае.

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

  1. Приложение представляет собой каталог слайд-шоу, и у меня есть один основной setInterval , который обрабатывает цикл пользовательского слайд-шоу в основном приложении.

     mainInterval = setInterval(changeSlide, 20000); execute after 20 seconds

function changeSlide(){
   // .... do changes
}

  2. Другой служит таймером ожидания, когда клиент нажимает на информацию слайда, появится модальный, но когда нет взаимодействия с пользователем, модальный закроется. Эта функция находится в другом файле javascripts.

     $('.item').click(function(e){
    // .. show modal

     idleInterval = setInterval(timerIncrement, 1000); // executes every 1 secs.
});

// This will reset idleTime when user interact with mousemove
$(this).mousemove(function (e) {
    idleTime = 0;
});

// This will reset idleTime when user interact with keypress.
// Since there is a side panel search engine will appear 
// when a button search is clicked.
$(this).keypress(function (e) {
    idleTime = 0;
});


function timerIncrement() {
    idleTime = idleTime   1; // increment whenever the function is called

    // idleTime is more than 10 secs?
    // If true (10 secs is met) close the search panel if open
    //  and close the modal.
    if (idleTime > 10) {  

        // ... close the search panel if open
        // ... hides modal

        clearInterval(idleInterval);
    }
}

Обновить

Поскольку есть модальный, будет отображаться при .item щелчке и для того, чтобы избежать множественного setInterval.

Я обрабатываю clearInterval(IdleInterval) , когда модальное событие hides срабатывает.

 $('#item-modal').on('hide.uk.modal', function(e){
    clearInterval(idleInterval);
});

Теперь самая большая проблема заключается в том, что модальное закрытие выполняется до истечения фактических 10 секунд, когда я печатаю console.log(idleTime); bang! я видел, что таймер выполняется быстрее, чем обычно.

Комментарии:

1. Вы нажимали несколько раз? Если щелкнуть дважды, одновременно запустится несколько диспетчеров таймера, каждый из которых увеличивает одну и ту же глобальную переменную.

2. о, clearInterval(idleInterval) в when есть модальные скрытия, чтобы справиться с этим. я обновлю вопрос подробнее

3. Я бы предпочел использовать setInterval(function(){ // do something },1000);

4. кроме того, если бы вы вложили item , это создало бы несколько интервалов. Никто не может помочь без демонстрации, которая воспроизводит это… все, что мы можем сделать, это догадаться

5. Можете ли вы объяснить разницу между setInterval(my_defined_func, 10000); и setInterval(function(){ // do something },1000);

Ответ №1:

Вы не сбрасывали интервал при каждом нажатии .item , что могло вызвать проблему с запуском нескольких интервалов

 // explicitely save the state you will be modifying to the window
var idleInterval = null
var idleTime = 0

$('.item').click(function(e) {
  // clear the interval if it's set
  clearInterval(idleInterval)
  idleInterval = setInterval(timerIncrement, 1000);
});

var resetIdleTime = function(e) {
  idleTime = 0;
}
$(this)
  .mousemove(resetIdleTime)
  .keypress(resetIdleTime);

function timerIncrement() {
  idleTime = idleTime   1;
  console.log(idleTime)
  if (idleTime > 2) {
    alert('show modal')
    clearInterval(idleInterval);
  }
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">this is the item</div>