new Date().getTime() gets milliseconds since page is loaded when passed as argument into a function-CodePudding

I'm trying to make a javascript animation with window.requestAnimationFrame. It should be triggered when a button is clicked (like the "dropping" animation of a dropdown menu appearing). I use the variable timeElapsed to calculate the time since the button is clicked, and calculate the new height of the object with timeElapsed. I pass the time when the button is clicked (start) as an argument of the function. According to my console, although start (computed outside the function) is computed correctly, for some reason it changes to the time since the page is loaded once it is passed into the function.

Here's what I have so far:

function mobileAppear(sTime) {
    console.log(sTime); //Prints milliseconds since page is loaded
    currTime = new Date().getTime();
    timeElapsed = (currTime - sTime)/1000;
    newHeight = timeElapsed*10 ;
    wishlist.style.height = newHeight   "vh";
    if (newHeight < 66){
        window.requestAnimationFrame(mobileAppear);
    }
}

function toggleView() {
  //Some code here
  var start = new Date().getTime();
  console.log(start); // works fine
  if (window.innerWidth < 768){
    mobileAppear(start);
  }
  
}

What's the problem here and how to fix that?

*Note: there's probably another mistake in the chunk of code, but for now I'm trying to fix this one.

CodePudding user response：

The problem of your code is that requestAnimationFrame will pass a DOMHighResTimeStamp to the callback function, in this case, mobileAppear. So sTime will not be the same as you get at toggleView.

You can move the start and sTime out like this:

let sTime = 0;

function mobileAppear() {
    console.log(sTime); //Prints milliseconds since page is loaded
    currTime = new Date().getTime();
    timeElapsed = (currTime - sTime)/1000;
    newHeight = timeElapsed*10 ;
    wishlist.style.height = newHeight   "vh";
    if (newHeight < 66){
        window.requestAnimationFrame(mobileAppear);
    }
}

function toggleView() {
    //Some code here
    sTime = new Date().getTime();
    console.log(sTime); // works fine
    if (window.innerWidth < 768){
        mobileAppear();
    }
}

Nevertheless, DOMHighResTimeStamp can be treated as elapsedTime. So a better way to solve your problem might be:

function mobileAppear(timeElapsed=0) {
    // console.log(sTime);
    // currTime = new Date().getTime();
    // timeElapsed = (currTime - sTime)/1000;
    newHeight = timeElapsed*10 ;
    wishlist.style.height = newHeight   "vh";
    if (newHeight < 66){
        window.requestAnimationFrame(mobileAppear);
    }
}

function toggleView() {
    //Some code here
    // sTime = new Date().getTime();
    // console.log(sTime); // works fine
    if (window.innerWidth < 768){
        window.requestAnimationFrame( mobileAppear );
    }
}

Let me know if this works.

CodePudding user response：

You want to let window.requestAnimationFrame handle your timestamps for you see below:

Here is the part of the MDN docs that I've had to follow in the past

const wishlist = document.getElementById('wishlist')
const button = document.getElementById('button')

button.addEventListener('click', toggleView)

let startTime

function mobileAppear(curTime) {
    if (startTime === undefined) startTime = curTime
    const timeElapsed = (curTime - startTime)/1000;
    const newHeight = timeElapsed * 10;
    wishlist.style.height = newHeight   "px"; // I changed this to pixels for the example
    if (newHeight < 66){
        window.requestAnimationFrame(mobileAppear);
    }
}

function toggleView() {
  //Some code here
  // let requestAnimationFrame handle sending the current timestamp
  window.requestAnimationFrame(mobileAppear)
}

button.addEventListener('click', toggleView)

<div id="wishlist" style="width: 200px; height: 1px; margin: 10px; background: red"></div>
<button id="button">Toggle View</button>