SetTimeout +цикл For Где я ошибаюсь?

Question

[Honey77]

var result=0;
document.getElementById('first').onclick = function (){
for(i=0;i<8;i++){
setTimeout(function (){
scrollTo(0, result+=100)}, 1000)}};

Я хочу, по нажатию, чтобы документ скролился вниз по 100px в секунду. А на деле, после нажатия кнопки, через секунду, у меня документ скролится на 800. Почему так?
Я ведь написал следующее: по нажатию кнопки, запусти функцию, с циклом(i<8;i++) на каждой итерации цикла с задержкой в 1 секунду сделай скролл вниз на 100.
Или я не это написал?

Comments

[Евгений Ромашкан]

Отформатируйте код. Осильте, пожалуйста, хотя бы редактор тостера.

[WapSter]

цикл выполняется за секунду, в стек попадают 8 таймаутов, практически одновременно, и каждый выполняется по истечению 1 секунды) JS сработал верно)

[Honey77]

Тимур Турсунбаев, Я почему-то решил, что цикл сначала выполнит то, что я написал в таймауте(вместе с задержкой), а потом перейдет к следующей итерации..

Answer 1

[DanKud]

Потому что вы устанавливаете 8 таймаутов с одним и тем же интервалом 1 секунда. Все они естественно выполняются через 1 секунду по порядку. Просто перемножайте таймаут на текущую итерацию:

var result = 0;
document.getElementById('first').onclick = function() {
    for(i = 1; i < 8; i++){
        setTimeout(function() {
            scrollTo(0, result += 100)
        }, (i * 1000))
    }
};

Answer 2

[wAML]

Тут почитать разницу между setTimeout и setInterval

Там же нужный вам пример

// начать повторы с интервалом 2 сек
var timerId = setInterval(function() {
  alert( "тик" );
}, 2000);

// через 5 сек остановить повторы
setTimeout(function() {
  clearInterval(timerId);
  alert( 'стоп' );
}, 5000);