Question

我有一张地图，上面有多个城市。我还有一个循环，显示每个城市的详细信息。一旦我点击其中一个城市，我想完全停止循环。

我尝试使用：clearTimeout（loopIdx），但是没有用。请你帮助我好吗？！干杯。

LOOP：

$(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>

Answer 1

您需要按名称或标识符访问timeoutID以清除它。（请参见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); }

Answer 2

将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>

单击jQuery / JS停止循环setTimeout

2 个答案: