setTimeout 的语法不正确

Question

我正在尝试制作一个虚假的加载屏幕，并且我需要在加载消息之间延迟大约 20-50 毫秒左右，以便人们可以在切换到初始化屏幕之前实际看到正在发生的事情。激活此功能的按钮转到以下功能：

function gameinit() {
    for (k = 0; k <=1; k += 0.125) {
        setTimeout(function () {
            var nexttxt = "Loading... " + toString(100 * k) + "%"
        }, 20);
        displayupdate(nexttxt);
    }
}

但是，当我使用 JSHint 时，这会出现不正确的语法（在 JSfiddle -https://jsfiddle.net/YoshiBoy13/xLn7wbg6/2/） - 特别是第 4 行和第 5 行。我已经查看了这方面的指南，似乎一切都井井有条。我做错了什么？

（注意：displayupdate(nexttxt) 用下一行文本更新

标签）

执行脚本时，什么也没有发生 - HTML 上的 16 行文本正常上移，前八行被 gameinit() 函数生成的八行替换，但 gameinit() 只生成空白。如果再次执行该脚本，它只会输出 112.5% 的 8 行（好像是 for 循环的第 9 次迭代）。

我几乎可以肯定这是我错过了一些基本的东西，有人可以告诉我我做错了什么吗？

Answer 1

使用 setInterval() 代替，您可以使用 clearInterval()

清除间隔

function gameinit() {
  displayupdate("Loading... 0%");
  var k = 0;
  var inter = setInterval(function() {
    if (k < 1) {
      k += .25;
      displayupdate("Loading... " + 100 * k + "%")
    } else {
      clearInterval(inter);
    }
  }, 2000);
}

function displayupdate(d) {
  console.log(d);
}

gameinit();

Answer 2

这里有另一个功能可以做得更好----setInterval

   var txt = '';
   var time = 0; 
   var id = setInterval(function(){
      console.log("loading..."+time/8*100+"%");
      if(time++>7)
         clearInterval(id);
   },1000);

Answer 3

setTimeout 无法正常工作，因为您希望它可以在循环内工作。您必须为传递给setTimeout 的每个循环变量创建一个闭包，或者创建一个新函数来执行setTimeout 操作。

function gameinit() {
    for (var k = 0; k <= 1; k += 0.125) {
        doSetTimeOut(k);
    }
}

function doSetTimeOut(k) {
    setTimeout(function() {
        var nexttxt = "Loading... " + toString(100 * k) + "%"
    }, 20);
    displayupdate(nexttxt);
}