嵌套setinterval循环

Nesting setIntervals loops

本文关键字：循环 setinterval 嵌套      更新时间：2023-09-26

如何嵌套两个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);

不要嵌套setinterval (除非您可能清除它们)

如下所示:

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

每4秒创建一个新的间隔。不要嵌套setInterval。也许你真正想要的是setTimeout ?

相关文章：