javascript - 嵌套 setIntervals 循环

Question

两个setInterval循环应该如何嵌套？

在外部循环 (setInterval1) 上，我希望每 4 秒发出一次服务器请求，然后在内部循环 (setInterval2) 中，我希望每 1 秒执行一次操作。过了一会儿，我的内部循环变得疯狂，如果我尝试清除它，它永远不会触发。

https://jsfiddle.net/y1f6nm6z/

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:

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

即使嵌套它们，它们通常也比 setInterval 问题更少。但使用一些条件来确保仅在必要时调用 setTimeout。

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