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设置视图的角度（通过控制台工作引用它，以便正确），s。refresh reloads图表。

我想这与async有关（循环是绕过超时执行的吗？），但是我自己无法解决这个问题......

感谢您的帮助！

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?

Answer 2

您在循环中设置了101个超时，但是当第一个执行时，您已经完成循环的所有时间并设置最终角度。所以你有两个问题。其中一个，正如Joe Frambach所指出的那样，你的超时时间都已经过去（接近） - 同时 - 每个都将在设置后执行100ms，而不是在最后一次之后100ms执行。两个，没有超时，当他们离开时，改变角度。他们都只是按照我的假设刷新视图...因此他们都会显示相同的最终角度，这个角度已经完成，并且在调用第一次刷新时设置了。

考虑更像这样的事情：

var currentIteration = 0;
var interval = setInterval(
    function()
    {
        if(currentIteration > 100)
            clearInterval(interval);
        else
        {
            s.cameras[0].angle = currentIteration / 100;
            s.refresh();
            currentIteration++;
        }
    },
    100);

在Javascript中延迟执行函数

2 个答案: