Блог

У меня есть список файлов, которые я хочу отобразить по порядку (линейный график), создавая анимацию в виде переходов 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.

Спасибо!

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