Is that how the countdown rolls now?

“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

RequestAnimationFrame is used to count down the time in three minutes. It can be used to count down the time in three minutes. It can be used to count down the time in three minutes.

However, in the process of time calibration, in order to catch up with the backward time quickly, the time beat too fast, resulting in a poor experience. In terms of body sense, the time was not correct, so I optimized another version on that basis

In order to achieve a version of super accurate! Very smooth! Excellent performance! Experience a great countdown

Old version of the function to achieve the code, demo can click

const totalDuration = 10 * 1000;
let requestRef = null;
let startTime;
let prevEndTime;
let prevTime;
let currentCount = totalDuration;
let endTime;
let timeDifferance = 0; // Countdown deviation per 1s, in ms
let interval = 1000;
let nextTime = interval;

setInterval(() = > {
  let n = 0;
  while (n++ < 1000000000);
}, 0);

const animate = (timestamp) = > {
  if(prevTime ! = =undefined) {
    const deltaTime = timestamp - prevTime;
    if (deltaTime >= nextTime) {
      prevTime = timestamp;
      prevEndTime = endTime;
      endTime = new Date().getTime();
      currentCount = currentCount - 1000;
      console.log("currentCount: ", currentCount / 1000);
      timeDifferance = endTime - startTime - (totalDuration - currentCount);
      console.log(timeDifferance);
      nextTime = interval - timeDifferance;
      // If it is too slow, execute the next loop immediately
      if (nextTime < 0) {
        nextTime = 0;
      }
      console.log('The time to perform the next rendering is:${nextTime}ms`);
      if (currentCount <= 0) {
        currentCount = 0;
        cancelAnimationFrame(requestRef);
        console.log('Cumulative deviation value:${endTime - startTime - totalDuration}ms`);
        return; }}}else {
    startTime = new Date().getTime();
    prevTime = timestamp;
    endTime = new Date().getTime();
  }
  requestRef = requestAnimationFrame(animate);
};

requestRef = requestAnimationFrame(animate);

Copy the code

Then there’s the subtle problem with this code

// If it is too slow, execute the next loop immediately
if (nextTime < 0) {
    nextTime = 0;
}
Copy the code

The problem is that if the thread is blocked and the countdown is seriously behind, suppose 3s, I set the next cycle to 0s, and now the countdown is 15s, you will see a fast countdown to 12s. How can you speed up the countdown

It was like an accelerated countdown to the end of my career, and I was shaking and trying to fix it

Is actually very simple, the adjacent values 0 set close to time for each cycle, so is every time don’t see there is a slight acceleration/deceleration, each cycle time is 1 s here, so we can amend the above this code, described the ago immediately after the operation, the slowdown in the chase, in order to optimize the user experience

For example, if you catch up with 2s in 3s-4s, then the fluctuation is obvious. However, if you lay down the number of seconds behind 2s to the next 1min, each time you catch up about 30ms, you will not see the drop

// Slow to a critical point, slightly slower than the normal number of cycles, then execute the next cycle
if (nextTime < 900) {
    nextTime = 900;
}
Copy the code

Here I set too much behind, catch up with 100ms per second, if 2s behind, 20s can catch up back, and do not see the obvious fluctuation, the time is accurate, has been the product students praise!

Although the modification is very small, but it is also the result of repeated thinking. If the time requirements are more strict, and the countdown time range is relatively small, it is too late to spread the gap to such a large period of time, it is suggested that the back-end students regularly push the latest countdown to the front end to verify the accuracy of the time, which is foolproof

conclusion

The above is my experience of using requestAnimationFrame to implement the countdown function repeatedly, I hope it will be helpful to you. If you can get a small praise as encouragement would be very grateful!!

More articles recommended:

“No more confusion! This article will give you a silky experience with Vue3.0 development.”

“Look at the Vue3 script-setup syntax and learn how to communicate with components.”

“Super detailed! Monitor five kinds of micro channel small programs to cut the background situation”