jQuery / JS останавливает цикл установки времени по щелчку

#javascript #jquery

Вопрос:

У меня есть карта с несколькими городами на ней. У меня также есть цикл, показывающий детали каждого города. Я хотел бы полностью остановить цикл, как только я нажму на один из городов.

Я пробовал с помощью: clearTimeout(loopIdx), но это не сработало. Не могли бы вы мне помочь ?! Приветствия.

ЦИКЛ:

 $(function() {
 var $mapCol = $('.map-col');
 var $mapBtn = $('.map-btn');
 var $mapLoops = $('.map-loop');
 var $btnLoops = $('.btn-loop');
 loopIdx = (function _loop(idx) {
    $mapCol.removeClass('active-map');
    $mapBtn.removeClass('active-btn');
    $mapLoops.removeClass('active-map').eq(idx).addClass('active-map');
    $btnLoops.removeClass('active-btn').eq(idx).addClass('active-btn');

    setTimeout(function() {
     _loop((idx   1) % $mapLoops.length);
        }, 6000);
     }(0));
});

BTN:

 <div class="btn-loop">City</div>

1. setTimeout возвращает числовой идентификатор, который вы передаете clearTimeout .

2. Измените setTimeout значение на return setTimeout так, чтобы loopIdx оно было установлено на его значение.

3. Я пытался $('btn-loop').click(function() { clearTimeout(loopIdx);}); , но это не сработало. @Barmar

4. $('btn-loop') должно быть $('.btn-loop') , вы забыли .

Ответ №1:

Присвоите результат setInterval() переменной и используйте ее в clearTimeout() вызове.

 $(function() {
  var $mapCol = $('.map-col');
  var $mapBtn = $('.map-btn');
  var $mapLoops = $('.map-loop');
  var $btnLoops = $('.btn-loop');
  var timer;
  loopIdx = (function _loop(idx) {
    $mapCol.removeClass('active-map');
    $mapBtn.removeClass('active-btn');
    $mapLoops.removeClass('active-map').eq(idx).addClass('active-map');
    $btnLoops.removeClass('active-btn').eq(idx).addClass('active-btn');

    timer = setTimeout(function() {
      _loop((idx   1) % $mapLoops.length);
    }, 2000);
  }(0));
  $btnLoops.click(function() {
    clearTimeout(timer);
  });
});

 .map-loop.active-map {
  background-color: yellow;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-loop">City</div>
<div class="map-loop">1</div>
<div class="map-loop">2</div>
<div class="map-loop">3</div>
<div class="map-loop">4</div>
<div class="map-loop">5</div>
<div class="map-loop">6</div>
<div class="map-loop">7</div>

Ответ №2:

Вам необходимо получить доступ к таймауту по имени или идентификатору, чтобы очистить его. (См https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout .)

Если вы хотите loopIdx быть идентификатором, вы можете использовать что-то вроде:

 let needToClear = false;
let loopIdx = setTimeout(function(){}, 6000);
// ...state changes here...
if(needToClear){ clearTimeout(loopIdx); }

1. спасибо за вашу помощь, но как мне прикрепить это к кнопке?

2. Вы добавляете прослушиватель событий к кнопке и включаете код в тело функции прослушивателя. (См developer.mozilla.org/en-US/docs/web/api/eventlistener . ) Например: const myBtn = document.querySelector("btn-loop"); myBtn.addEventListener("click", myFunc); function myFunc(){ /* loop and setTimeout code go here */ }