试图弄清楚此requestAnimationFrame函数中的变量“ now”来自何处，或如何动态获取其值

Question

基本上我一直在尝试使用多个老虎机滚子来创建游戏。 我已经尝试了许多版本来实现自己的目标，并且所有版本都可以在PC上完美运行，但是一旦将它们放到移动设备上，它们就会变得很落后。 我发现这主要是因为我正在操纵dom元素。

我在网上找到了一个功能，我已经将其复制并在应用程序中运行，它可以完美运行。

现在，我试图用我自己的变量将此函数写入我的实际应用中。

我的问题是这样的：

有一个称为“ NOW”的变量，该变量传递给函数animate（）;。 我试图弄清楚它的来源以及如何自己动态创建它。 在此函数中有一个requestAnimationFrame请求，经过数小时的研究，我仍然找不到任何东西。

这是代码所在的小提琴： https : //codepen.io/indamix/pen/lLxcG

    var sm = (function(undefined){
    var tMax = 3000, 
    height = 210,
    speeds = [],
    r = [],
    reels = [
        ['coffee maker',   'teapot',       'espresso machine'],
        ['coffee filter',  'tea strainer', 'espresso tamper'],
        ['coffee grounds', 'loose tea',    'ground espresso beans']
    ],
    $reels, 
    $msg,
    start;

    function init(){
    $reels = $('.reel').each(function(i, el){
        el.innerHTML = '<div><p>' + reels[i].join('</p><p>') +   '</p></div><div><p>' + reels[i].join('</p><p>') + '</p></div>'
    });

    $msg = $('.msg');

    $('button').click(action);

    }

    function action(){
    if (start !== undefined) 
    return;

    for (var i = 0; i < 3; ++i) {
        speeds[i] = Math.random() + .5; 
        r[i] = (Math.random() * 3 | 0) * height / 3;
    } 

    $msg.html('Spinning...');
    animate();
    } 

    function animate(now){  
    if (!start) start = now;

    var t = now - start || 0;

    for (var i = 0; i < 3; ++i)
        $reels[i].scrollTop = (speeds[i] / tMax / 2 * (tMax - t) *             (tMax - t) + r[i]) % height | 0;
    if (t < tMax)
        requestAnimationFrame(animate);
    else {
        start = undefined;
        check();
    }
  }
    function check(){
    $msg.html(
    r[0] === r[1] && r[1] === r[2] ?
    'You won! Enjoy your ' + reels[1][ (r[0] / 70 + 1) % 3 | 0     ].split(' ')[0]  : 'Try again');}
  return {init: init}
   })();$(sm.init);

我已经有一段时间了，就像几天。 我发现Now变量与requestAnimationFrame函数有关，以确定动画帧的结束位置，但这只是对我的推测。我看不到。

Answer 1

您可以将performance.now()用作自己的animate函数调用的参数值