Question

我有一个文件列表，我想按顺序绘制（线图），创建一个动画，因为d3在它们之间转换。

我有一个更新函数，它将文件名作为输入，并将当前线图转换为新的折线图。这很好。

但是，我现在想要按顺序转换五个不同的文件。

以下是我正在使用的代码：

var file_list = ["time1.csv", "time2.csv", "time3.csv", "time4.csv", "time5.csv"];

var num_files = file_list.length;

for (i = 0; i < num_files; ++i) {
    setTimeout(setDelay(i), 1000);
}

function setDelay(i) {
  setTimeout(function(){
    update(file_list[i]);
  }, 1000);
}

这会转换我的折线图，但它会从第一个（time1.csv）立即转换到最后一个（time5.csv），跳过中间的所有内容。

我怎样才能弄清楚出了什么问题？

如果我在循环中调用console.log（file_list [i]），它将循环并打印time1.csv ... time5.csv。

谢谢！

Answer 1

每次迭代都会调用setDelay，要在超时时对其进行评估，必须将函数对象作为回调setTimeout(function() { setDelay(i); }, 1000)

传递

但是你的逻辑是错误的，为什么每次迭代有两个setTimeout？所有这些都在每次迭代后立即调用，您必须链接setDelay调用或将延迟乘以迭代索引。

var file_list = ["time1.csv", "time2.csv", "time3.csv", "time4.csv", "time5.csv"];

function setDelay() {
    var file = file_list.shift();
    if (file) {
        update(file);
        setTimeout(setDelay, 1000);
    }
}

setDelay();

用新数据更新图表

1 个答案: