Adding additional arguments to a function called back by requestAnimationFrame

Question

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:

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)?

From what I can muster with my limited knowledge, I think the solution lies either in .call()/.apply() or by passing an anonymous function that contains scroll in it to rAF, but I can't wrap my head around accessing rAF's timestamp if I do either. — Danneh, Feb 27 '14 at 06:54
Possible duplicate of [How can i pass argument with requestAnimationFrame?](https://stackoverflow.com/questions/19893336/how-can-i-pass-argument-with-requestanimationframe) — Magnus Lind Oxlund, Nov 19 '18 at 15:26

marionebl · Accepted Answer · 2014-02-27T10:41:33.750

12

What your requestAnimationFrame statement evaluates to:

scroll(timestamp, distanceToScroll, secondsToScroll), where timestamp is undefined. It throws an error or returns undefined
window.requestAnimationFrame is executed without parameters, thus no callback

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

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

What this evaluates to:

window.requestAnimationFrame is called with anonymous function as callback
anonymous function is called with timestamp as first parameter
scroll is called with current timestamp, distanceToScroll and secondsToScroll as parameters

edited Feb 27 '14 at 10:41

answered Feb 27 '14 at 07:03

marionebl

3,342
20
34

1

Such an obvious solution, but I couldn't see it. Thank you. – Danneh Feb 27 '14 at 07:18
requestAnimationFrame(timestamp=>scroll(timestamp, distanceToScroll, secondsToScroll)); – Garrett May 25 '20 at 01:09
1

but how would you to remove the requestAnimationFrame if there is no reference to an anonymous function? – Raba Aug 24 '20 at 02:24

score 0 · Answer 2 · answered Feb 01 '18 at 14:29

0

Pure 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'));

answered Feb 01 '18 at 14:29

quemeful

9,542
4
60
69

`requestAnimationFrame` is javascript and alot better and recommended approach when working with animations, nothing goes more smoother – Muhammad Omer Aslam Jan 31 '19 at 22:02

Adding additional arguments to a function called back by requestAnimationFrame

2 Answers2

Linked