1

この関数は、ページの上部から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);
  }
}

悲しい顔。なんで？

[編集：助けてくれてありがとう！私はそれを使って、もう少し複雑なこの最終的な解決策を書きました。最初は速くスクロールし、次に遅くスクロールします。ちょうど私が欲しかったもの。setIntervalのsetTimeoutinsteatを使用することにより、速度曲線をさらに細かく制御できるため、簡単に指数関数的に速度を落とすことができます] 

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

2 に答える 2

2

タイムアウトは一度に発生するわけではなく、予想されるタイミングで発生します。yただし、それらはすべて同じ変数で表される位置にスクロールしようとするためy、ループの終了時にすべての値を使用します。

これに対する通常の修正は、クロージャーを導入することです。

function scrollDown() {
    var yFinal = 216,
        delay = 0;

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

（y変数がグローバルであることに注意してくださいvar。ローカルにするためにで宣言する必要があります。）

于 2012-12-08T03:00:56.607 に答える
1

参照ではなく値setTimeoutを渡すには、無名関数でラップする必要があります。y

(function(y) {
    setTimeout(function() {
        window.scrollTo(100,y);
    }, delay);
})(y);
于 2012-12-08T03:00:53.223 に答える