Question

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

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/上） - 特别是第四行和第五行。我已经看了这个指南，所有似乎都是有序的。我做错了什么？

（注意：displayupdate（nexttxt）使用下一行文本更新＆lt; p＆gt;标记）

执行脚本时，没有任何反应 - HTML上的十六行文本正常移动，前八行被gameinit（）函数生成的八行替换，但gameinit（）只生成空白。如果脚本再次执行，它只输出8行112.5％（就好像它是for循环的第9次迭代）。

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

Answer 1

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

清除间隔

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

这是另一个功能可以更好地做到这一点---- setInterval

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

setTimeout

3 个答案: