Question

我已经阅读了w3schools和其他类似问题的相关页面，但似乎无法理解下面的内容有什么不对：

var myfunc03 = function (i) {
  document.getElementById('d01').innerHTML += 100-i+"<br>";
};

var myFunc01 = function() {
  i=0;
  while (i<100) {
    setTimeout(myfunc03(i), 1000)
    i++;
  }
};

运行myFunc01();时。

没有任何暂停，i的所有可能值都会立即列出。</ p>

这里有逻辑错误吗？

Answer 1

你可以更简单地 递归：

var i = 0;
function f1() { ... };   
function f() {
    f1();
    i += 1;
    setTimeout(function() {
        if(i < 100) {
            f();
        }
    }, 1000);
}
f();

实施例

＆＃13;

var i = 0;

var myfunc03 = function(i) {
  document.getElementById('d01').innerHTML += 100 - i + "<br>";
};

var myFunc01 = function() {
  myfunc03(i);
  i += 1;
  setTimeout(function() {
    if (i < 100) {
      myFunc01();
    }
  }, 1000);
}

myFunc01();

＆＃13;

<div id="d01"></div>

＆＃13;

可重复使用的功能

＆＃13;

function say(sentence) {
  console.log(sentence);
}

function sayHello() {
  say("Hello!");
}

var fn = sayHello;
var count = 10;
var ms = 1000;

function repeat(fn, count, ms) {
  var i = 0;

  function f() {
    fn();
    i += 1;
    setTimeout(function() {
      if (i < count) {
        f();
      }
    }, ms);
  }

  f();
}

repeat(fn, count, ms);

＆＃13;

Answer 2

i循环不会等待 setTimeout() 完成。您需要为每个时间延迟设置不同的时间延迟，并使用闭包来保存var myFunc01 = function() { var i = 0; while (i < 100) { (function(i) { setTimeout(function() { document.getElementById('d01').innerHTML += 100 - i + "<br>"; }, 1000 * i) })(i++) } }; myFunc01();的值。同样在你的情况下，函数将在最初执行，返回值在 setTimeout() 中设置为参数，因此您需要在匿名函数内调用函数或直接设置函数。 / p>

<span id="d01"></span>

var myFunc01 = function() {
  var i = 0;
  // store the interval id to clear in future
  var intr = setInterval(function() {
    document.getElementById('d01').innerHTML += 100 - i + "<br>";
    // clear the interval if `i` reached 100
    if (++i == 100) clearInterval(intr);
  }, 1000)

}

myFunc01();

<小时/> 虽然 setInterval() 可以在这里使用

<span id="d01"></span>

{{1}}

Answer 3

是。您的代码中存在两个问题：

setTimeout函数接受函数作为第一个参数，但在您的代码中，myfunc03(i)不返回任何内容
while循环不能满足您的需要，相反，您必须使用递归函数。因为在第一次超时被触发后应该调用第二个函数。

示例代码：

var myfunc03 = function (i) {
  setTimeout(function() {
    document.getElementById('d01').innerHTML += 100-i+"<br>";
    if (i < 100) {
      i++;
      myfunc03(i);
    }
  }, 1000);
};

var myFunc01 = function() {
  myfunc03(0);
};

myFunc01();

<div id="d01"></div>

Answer 4

我认为你在setTimeout上缺少一个分号，你应该尝试以下面的方式传递参数：
```
setTimeout(myfunc03, 1000*i, i); 
```

Answer 5

while等待setTimeout：

(async () => {
  var i = 0;
  while (await new Promise(resolve => setTimeout(() => resolve(i++), 1000)) < 100) {
    console.log("I get printed 100 times every second");
  }
})();

Answer 6

一个简单的选择是改用 setInterval() 方法。 setInterval 每次都将作为循环执行代码，直到您使用 clearInterval() 方法将其中断。

示例：

var index = 0;
let incrementEveryHalfSecond = setInterval(function(){
  index++;
  document.querySelector("body").innerHTML += index+'</br>';
  if(index == 10) clearInterval(incrementEveryHalfSecond)
}, 500)

<body></body>

观察您决定循环中断，将存储 setInterval 方法的变量作为参数传递到 clearInterval 方法中。现在您可以创建函数以获得更清晰的代码。 w3schools documentation

问题答案：[从 100 到 1] 我颠倒了 i 的顺序以简化，但您也可以使用“100-i”。

var myfunc03 = function (i) {
  document.getElementById('d01').innerHTML += i+"<br>";
};

var myFunc01 = function() {
  let i=100;
  let incrementEveryOneSecond = setInterval(function(){
    myfunc03(i);
    if(--i == 0) clearInterval(incrementEveryOneSecond);
  }, 1000) 
 
};
myFunc01();

 <span id="d01"></span>

Answer 7

while方法快速运行，所有超时几乎在第一秒后执行..你可以做的是

而不是从$timeout拨打myfunc03以获取下一个值
在您的通话时间超时内增加秒数，例如i*1000

此外，正如其他人指出的那样，你不能用setTimeout中的params来调用函数使用像

...
while (i<100) {
  setTimeout(
     function(i){
        myfunc03(i);
     }, i*1000);
   i++;
}
...

表示

while循环中的setTimeout（）方法

7 个答案:

实施例

可重复使用的功能