Почему не срабатывает задержка setTimeout в цикле?

Question

[big_hasan]

Нужно по клику плавно перемотать страницу на верх. В цикле происходит задержка на 100 мс и текущая позиция position уменьшается на 10 пикселей с каждой итерацией. При попытке запустить страница переходит на верх мгновенно.

var position=window.pageYOffset;
while(position>0)
		{
		setTimeout(function (){window.scrollTo(0,position)}, 100);
		position=position-10;
		}

Однако, если добавить, например, alert(position); в тело цикла, то видно, что с каждой итерацией страница действительно сдвигается и значение position действительно уменьшается на 10 пикселей. В чем может быть проблема?

UPD: Если поставить большое время задержки (без alert) страница прокручивается не мгновенно, а через секунду-две.

Answer 1

[Сергей Горностаев]

А вы alert вставьте в анонимную функцию, которую передаёте в вызов setTimeout. Сразу станет всё понятно. Лучше сделать так:

function smoothScroll() {
    if(window.pageYOffset > 0) {
        window.scrollTo(0, window.pageYOffset - 10);
        setTimeout(smoothScroll, 100);
    }
}

setTimeout(smoothScroll, 100);

Comments

[big_hasan]

Сергей Горностаев Спасибо большое за интересное и (самое главное) рабочее решение!!! Правда, долго тупил по поводу того, что функция передается в качестве параметра без скобок)))
Один вопрос. Вставил alert в анонимную функцию - страница сначала прокрутилась, а потом уже пошли алерты друг за другом. Почему??

[alex-dev]

Потому что setTimeout вызывает Вашу функцию асинхронно.

P.S. А еще лучше использовать рекурсию (дублирование кода - это плохо)

function smoothScroll() {
    setTimeout(function () {
        if (window.pageYOffset > 0) {
            window.scrollTo(0, window.pageYOffset - 10);
            smoothScroll();
        }
    }, 100)
}

[big_hasan]

alex-dev: Премного благодарен! Действительно, такое решение изящнее и, наверное, правильнее. Теперь есть что почитать (я имею ввиду асинхронное выполнение кода)))