Задержка выполнения функции в 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); 

} 

s FYI относится к графе инициализирована, s.cameras [0] .angle задает угол зрения (со ссылкой на него через консольные работы, так что это правильно), 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?

Answer 2

Вы находитесь на сайте ng 101 тайм-аутов в цикле, но к тому времени, когда первый из них даже выполняется, вы уже закончили все время через цикл и задали конечный угол. Таким образом, у вас есть две проблемы. Один из них, как отметил Джо Фрамбах, истекает, каждый тайм-аут (одновременно) - каждый из них будет исполнять 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);