向requestAnimationFrame返回的函数添加其他参数

I am looking to create a function that scrolls an image element x pixels over y time on an HTML5 canvas, using requestAnimationFrame and delta time. What I can't figure out is how to add more arguments to my function, when requestAnimationFrame allready calls back my function with one argument (a DOMHighResTimeStamp). I am pretty sure the following code doesn't work:

我正在寻找创建一个函数，使用requestAnimationFrame和delta time在HTML5画布上滚动图像元素x像素。当requestAnimationFrame allready用一个参数（一个DOMHighResTimeStamp）回调我的函数时，我无法弄清楚如何为我的函数添加更多参数。我很确定以下代码不起作用：

function scroll(timestamp, distanceToScroll, secondsToScroll) {
  //delta = how many milliseconds have passed between this and last draw
  if (!lastDraw) {var lastDraw = timestamp;};
  delta = (0.5 + (timestamp - lastDraw)) << 0; //bitwise hack for rounding integers
  lastDraw = timestamp;

  //speed (pixels per millisecond) = amount of pixels to move / length of animation (in milliseconds)
  speed = distanceToScroll / secondsToScroll;

  //new position = current position + (speed * delta)
  position += (speed * delta);

  context.drawImage(myImage,0,position,50,50/*of 200*/,0,0,100,100);
  requestAnimationFrame(scroll(timestamp, distanceToScroll, secondsToScroll));
};

//later...
scroll(timestamp, 100, 5)
scroll(timestamp, 10, 20)

My question is I have no idea how to force requestAnimationFrame to continute to call my scroll function with my additional parameters, when all it does by default is pass just one argument (a timestamp) on callback. So how do I go about adding more parameters (or forcing rAF to put the timestamp in my 'timestamp' argument)?

我的问题是我不知道如何强制requestAnimationFrame继续使用我的附加参数来调用我的滚动函数，当它默认情况下只在调用时传递一个参数（时间戳）时。那么我该如何添加更多参数（或强制rAF将时间戳放在我的'timestamp'参数中）？

2 个解决方案

#1

What your requestAnimationFrame statement evaluates to:

您的requestAnimationFrame语句的计算结果为：

scroll(timestamp, distanceToScroll, secondsToScroll), where timestamp is undefined. It throws an error or returns undefined
scroll（timestamp，distanceToScroll，secondsToScroll），其中timestamp未定义。它会抛出错误或返回undefined
window.requestAnimationFrame is executed without parameters, thus no callback
window.requestAnimationFrame在没有参数的情况下执行，因此没有回调

Passing an anonymous function that calls scroll with the desired parameters should do the trick:

传递一个使用所需参数调用scroll的匿名函数应该可以解决问题：

requestAnimationFrame(function(timestamp) {
    scroll(timestamp, distanceToScroll, secondsToScroll));
});

What this evaluates to:

评估结果如下：

window.requestAnimationFrame is called with anonymous function as callback
window.requestAnimationFrame使用匿名函数作为回调调用
anonymous function is called with timestamp as first parameter
使用timestamp作为第一个参数调用匿名函数
scroll is called with current timestamp, distanceToScroll and secondsToScroll as parameters
使用当前时间戳，distanceToScroll和secondsToScroll作为参数调用scroll

#2

Pure JavaScript

纯JavaScript

function scrollIntoViewSmooth(elem) {
    var move = elem.offsetTop - (elem.offsetTop - elem.parentElement.scrollTop) * 0.25;

    if (Math.abs(elem.offsetTop - move) <= 2) {
        elem.parentElement.scrollTop = elem.offsetTop;
    } else {
        elem.parentElement.scrollTop = move;
        setTimeout(scrollIntoViewSmooth, 33, elem);
    }
}

Example

例

scrollIntoViewSmooth(document.getElementById('stuff'));

#1