Javascript中函数的延迟执行答案

【问题标题】：Delayed execution of a function in JavascriptJavascript中函数的延迟执行
【发布时间】：2014-05-22 20:53:25
【问题描述】：

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

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

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

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

 }

仅供参考 s 指的是初始化的图形，s.cameras[0].angle 设置视角（通过控制台工作引用它，所以这是正确的），s.refresh 重新加载图形。

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

感谢您的帮助！

【问题讨论】：

标签： javascript visualization sigma.js

【解决方案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?

【讨论】：

太好了，非常感谢！你知道我怎样才能让它以最平滑的方式无限旋转吗？现在它有点跳跃。顺便说一句，由于时间限制，我无法接受答案 - 将在 3 分钟内完成 :)
这样做：stackoverflow.com/questions/22154129/… 并设置var angle = (i / 100) % (Math.PI*2);

【解决方案2】：

您在一个循环中设置了 101 个超时，但是当第一个超时甚至执行时，您已经完成了循环的所有时间并设置了最终角度。所以你有两个问题。一，正如 Joe Frambach 所指出的，您的超时都设置为同时关闭（接近） - 每个超时都将在设置后 100 毫秒执行，而不是在最后一个超时后 100 毫秒。二，没有一个暂停，当他们离开时，改变角度。他们都只是做我认为刷新视图的事情......因此他们都会显示相同的最终角度，在调用第一次刷新时已经设置完毕。

考虑类似这样的事情：

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

【讨论】：