Question

如何嵌套两个setInterval循环？

在外部循环（setInterval1）上，我希望每4秒发出一次服务器请求，然后在内部循环（setInterval2）中，我希望做1秒钟的事情。片刻之后，我的内循环变得疯狂，如果我试图清除它，它永远不会触发。

var counter1 = 0;
var counter2 = 0;
var setInterval1 = setInterval(function() {
  //$.getJSON( '/getData.php', function(json) {
  console.log('counter1', counter1);
  counter1++;
  var setInterval2 = setInterval(function() {
    console.log('counter2', counter2);
    counter2++;
  }, 1000);
  //clearInterval(setInterval2);
  //});
}, 4000);

Answer 1

不要嵌套setIntervals （除非你清除它们，否则）

当你这样做时会发生这种情况：

setInterval1
     ├────> function1 ────> setInterval2
     │                           ├────> function2
     │                           ├────────> function2
     │                           ├────────────> function2
     │                           ⋮
     ├────────> function1 ────> setInterval2
     │                               ├────> function2
     │                               ├────────> function2
     │                               ├────────────> function2
     │                               ⋮
     ├────────────> function1 ────> setInterval2
     │                                   ├────> function2
     │                                   ├────────> function2
     │                                   ├────────────> function2
     │                                   ⋮
     ├────────────────>  …
     ⋮

我建议改为setTimeout：

＆＃13;

var counter1 = 0;
var counter2 = 0;
(function timeout1() {
  console.log('counter1', counter1);
  counter1++;
  var i = 0;
  (function timeout2() {
    console.log('counter2', counter2);
    counter2++;
    ++i;
    setTimeout(i < 4 ? timeout2 : timeout1, 1000);
  })();
})();

＆＃13;

即使你嵌套它们，它们通常也不会比setInterval更容易出问题。但是请使用一些条件来确保只在必要时调用setTimeout。

＆＃13;

var counter1 = 0;
var counter2 = 0;
(function timeout1() {
  console.log('counter1', counter1);
  counter1++;
  var i = 0;
  (function timeout2() {
    console.log('counter2', counter2);
    counter2++;
    ++i;
    if(i < 4) setTimeout(timeout2, 1000);
  })();
  setTimeout(timeout1, 4000);
})();

＆＃13;

Answer 2

您每4秒创建一个新的间隔。不要筑巢setInterval。也许你真正想要的是setTimeout？

嵌套setIntervals循环

2 个答案: