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 的 setTimeout 代替，它可以让您更好地控制速度曲线，因此您可以轻松地使其呈指数级减速] 

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 回答