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

questionAnswers(2)

yourAnswerToTheQuestion