Wszystkie setTimeouts wewnątrz javascript dla pętli zdarzają się jednocześnie
Ta funkcja powinna przewijać w dół od góry strony do 215 pikseli poniżej, ze wzrastającym opóźnieniem, tak aby pierwsze zdarzenie window.scrollTo miało miejsce w 10ms, następne w 20ms i tak dalej.
Ostatnia linia powinna być opóźniona o 2150 ms, więc w sumie zajmuje to około 2 sekund.
Zamiast tego natychmiast przewija 215 pikseli jednocześnie.
function scrollDown() {
var yFinal=216, delay=0;
for (y=0; y<yFinal; y++) {
delay = delay+10
setTimeout(function() {
window.scrollTo(100,y);
},delay);
}
}
Smutna mina. Czemu?
[edytuj: dzięki za pomoc! użyłem go, aby napisać to ostateczne rozwiązanie, które jest nieco bardziej skomplikowane i oferuję je tutaj, aby każdy mógł się wyrwać. najpierw szybko się przewija, a potem powoli. tylko co chciałem. używając ustawienia setTimeout w setInterval, daje to jeszcze większą kontrolę nad krzywą prędkości, dzięki czemu można łatwo spowolnić wykładniczo]
function showCategory(categoryId)
{
var yInitial=document.body.scrollTop,
yFinal=216,
delay=0;
if (yInitial<yFinal)
{
yInitial=(yFinal-yInitial)/1.3+yInitial;
window.scrollTo(100, yInitial);
for (var yCurrent = yInitial; yCurrent < yFinal; yCurrent+=2)
{
delay += 30;
(function(position)
{
setTimeout(function()
{
window.scrollTo(100, position);
}, delay);
})(yCurrent);
}
}
}