javascript - 与setInterval和setTimeout并发操作

我是JavaScript新手，我正在尝试使用setInterval和setTimeout实现并发操作。

我想实现的目标，实际发生的事情以及预期发生的事情可以通过以下代码得到最好的解释。

var myVar = setInterval(function() {
  myTimer()
}, 1000);

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

for (var i = 0; i < 100; i++) {
  setTimeout(function() {
    console.log("log " + i);
  }, 3000);
}

<p>A script on this page starts this clock:</p>
<p id="demo"></p>

我对开头的setInterval的期望是，函数myTimer每秒执行一次，与之后发生的情况无关。当然，如果站点关闭或在clearTimeout上调用myVar，则除外。

我无法验证此操作是否真的独立且持续进行。

下面的for循环可用来模拟其他代码，以查看myTimer函数是否可以独立执行。

我希望循环以i=0开始，然后等待三秒钟，将log 0登录到控制台，然后继续使用i=1，依此类推。

相反，似乎超时已开始，同时i已到达for循环的末尾，因此是100。

如何获得for循环以等待setTimeout的迭代？

并且setInterval是否真的每秒独立于以下代码执行一次？例如。如果以下代码中的操作需要一些处理/时间，在处理过程中时钟是否仍会更新？

最佳答案

您可以使用i来更改超时时间，并在i上使用闭包以获取正确的值。

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

var i,
    myVar = setInterval(myTimer, 1000);

for (i = 0; i < 100; i++) {
    setTimeout(function (i) {
        return function() {
            console.log("log " + i);
        };
    }(i), 3000 * i);
}

<p>A script on this page starts this clock:</p>
<p id="demo"></p>

超时后调用超时的版本。

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

function next() {
    i++;
    console.log("log " + i);
    if (i < 300) {
        setTimeout(next, 3000);
    }
}

var i = 0,
    myVar = setInterval(myTimer, 1000);

setTimeout(next, 3000);

<p>A script on this page starts this clock:</p>
<p id="demo"></p>