Все setTimeouts внутри цикла JavaScript происходят одновременно

Эта функция должна прокручиваться вниз от верхней части страницы до 215 пикселей ниже с увеличивающейся задержкой, чтобы первое событие window.scrollTo происходило через 10 мс, а затем через 20 мс и т. Д.
Последняя строка должна быть задержана на 2150 мс, так что всего это занимает около 2 секунд.
Вместо этого он сразу прокручивает вниз на 215 пикселей.

function scrollDown() {
  var yFinal=216, delay=0;
  for (y=0; y<yFinal; y++) {
    delay = delay+10
    setTimeout(function() {
      window.scrollTo(100,y);
    },delay);
  }
}

Грустное лицо. Почему?

[править: спасибо за помощь! Я использовал его, чтобы написать это окончательное решение, которое немного сложнее, и я предлагаю его здесь, чтобы кто-нибудь сорвал. сначала он быстро прокручивается, потом медленно. именно то, что я хотел. используя setTimeout вместо setInterval, он дает вам еще больший контроль над кривой скорости, так что вы можете легко замедлить ее экспоненциально]

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

Ответы на вопрос(2)

Ваш ответ на вопрос