javascript - 延迟执行 Javascript 中的函数

Question

我正在使用 Sigma.Js library并希望在页面加载后的前 10 秒内让图形围绕其轴旋转。我为它写了下面的代码，但它不起作用。知道为什么吗？

 for (i = 0; i < 101; i++) {

    var angle = i / 100;
    s.cameras[0].angle = angle;

    setTimeout(function() {
       s.refresh();
    },100);

 }

FYI s 是指初始化的图形，s.cameras[0].angle 设置 View 的 Angular (通过控制台工作引用它，所以这是正确的)，s.refresh 重新加载图。

我猜这与异步有关(循环绕过超时执行？)，但我自己无法弄清楚...

感谢您的帮助!

Answer 1

所有超时都是同时设置的，因此 100 毫秒的超时将导致所有超时同时触发。

将超时设置为 100*i，这样超时就会交错为 100, 200, 300, ... 10100。

您可能还会遇到 i 变量的作用域问题，因此将其包装在这样的闭包中:

for (i = 0; i < 101; i++) {
  setTimeout((function(i) {
    return function() {
      var angle = i / 100;
      s.cameras[0].angle = angle;
      s.refresh();
    };
  })(i), 100*i);
}

更简洁的语法(对于 IE9+)是:

for (i = 0; i < 101; i++) {
  setTimeout(function(i) {
    var angle = i / 100;
    s.cameras[0].angle = angle;
    s.refresh();
  }.bind(void 0,i), 100*i);
}

有关为什么您需要这样做的信息，请参阅此引用答案:Javascript infamous Loop issue?