转入已备案网站,wordpress+软件+入门,二七网建站,wordpress批量删除道阻且长#xff0c;行而不辍#xff0c;未来可期 知识点一#xff1a; new Date().getTime()可以得到得到1970年01月1日0点零分以来的毫秒数。单位是毫秒 new Date().getTime()/1000获取秒数1分钟60秒#xff0c;1小时60分钟1hour:60*60单位是秒 60*60*1000单位… 道阻且长行而不辍未来可期 知识点一 new Date().getTime()可以得到得到1970年01月1日0点零分以来的毫秒数。单位是毫秒 new Date().getTime()/1000获取秒数1分钟60秒1小时60分钟1hour:60*60单位是秒 60*60*1000单位是秒1day:24*60*60单位是秒 24*60*60*1000单位是秒知识点二、 为什么使用 requestAnimationFrame 来写定时器呢 答当页面离开或切换到其他标签页时requestAnimationFrame 中的代码将不再执行。
详解因为 requestAnimationFrame 方法依赖于浏览器的渲染循环而在页面不可见或失去焦点时浏览器会暂停渲染循环以减少资源消耗。 因此使用 requestAnimationFrame 实现的动画或定时器在页面不可见或失去焦点时会自动暂停直到页面重新可见或获得焦点时才会继续执行。 这是浏览器的默认行为无需额外处理。
如果你希望即使在页面不可见时仍然执行代码可以考虑使用 setTimeout 或 setInterval 这样的定时器函数它们在页面不可见时仍会继续执行。不过请注意频繁的定时器操作可能会对性能产生负面影响因此需要谨慎使用。
如果不用 requestAnimationFrame,也可以用别的方法实现–离开页面时定时器停止回到页面时定时器继续走动的效果
方法可以利用 window 对象的 blur 和 focus 事件来监听页面失去焦点和获得焦点的状态。
requestAnimationFrame是什么 答requestAnimationFrame 是浏览器提供的一个用于执行动画效果的 API。 它接收一个回调函数作为参数并在下一次浏览器重绘之前执行该回调函数。 浏览器通常以每秒60帧即每秒60次重绘的速度运行动画因此 requestAnimationFrame 的回调函数约每16.6毫秒1000ms / 60调用一次。
使用 requestAnimationFrame 可以确保动画在最佳的性能下运行因为它会在浏览器准备好绘制下一帧之前执行回调函数。 这样可以避免不必要的重绘和浪费的资源。
需要注意的是requestAnimationFrame 返回一个标识符或称为句柄可以使用该标识符来取消动画帧请求使用 cancelAnimationFrame 函数进行取消操作。
代码demo: const { days, hours, minutes, seconds } useCountDown2(new Date(2023-08-22T03:35:00.000Z).getTime());
import { useState, useEffect } from react;const oneDay 1000 * 60 * 60 * 24;
const oneHour 1000 * 60 * 60;
const oneMinute 1000 * 60;
const oneSecond 1000;let timernull;
export function useCountDown2(endDate) {const [days, setDay] useState(00);const [hours, setHour] useState(00);const [minutes, setMinute] useState(00);const [seconds, setSecond] useState(00);const [endTime]useState(endDate);useEffect(() {const setLeftTime () {//requestAnimationFrame 的单位是毫秒msconst nowTimeMath.ceil(new Date().getTime());const diff endTime - nowTime;let msec diff;const d Math.floor(msec / oneDay);msec - d * oneDay;const hh Math.floor(msec / oneHour);msec - hh * oneHour;const mm Math.floor(msec / oneMinute);msec - mm * oneMinute;const ss Math.floor(msec / oneSecond);msec - ss * oneSecond;setDay(${d}.replace(/^\d$/, 0$));setHour(${hh}.replace(/^\d$/, 0$));setMinute(${mm}.replace(/^\d$/, 0$));setSecond(${ss}.replace(/^\d$/, 0$));timer requestAnimationFrame(setLeftTime);if (endTime nowTime) {console.log(销毁)return cancelAnimationFrame(timer);}console.log(${mm}.replace(/^\d$/, 0$),${ss}.replace(/^\d$/, 0$))};if (endTime endTime Math.ceil(new Date().getTime())) {timer requestAnimationFrame(setLeftTime);}return () {// 清除定时器console.log(销毁——)cancelAnimationFrame(timer);};}, [endTime]);return {days,hours,minutes,seconds,};
}结论经测试从图中确实可以看出当离开页面的时候requestAnimationFrame中的代码暂停执行减少了资源的消耗
