countDown+react+hook

道阻且长,行而不辍,未来可期

知识点一:
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 timer=null;
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 的单位是毫秒(ms)const nowTime=Math.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中的代码暂停执行,减少了资源的消耗

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/58564.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Gin 框架入门实战系列(一)

GIN介绍 Gin是一个golang的微框架,封装比较优雅,API友好,源码注释比较明确,具有快速灵活,容错方便等特点 对于golang而言,web框架的依赖要远比Python,Java之类的要小。自身的net/http足够简单,性能也非常不错 借助框架开发,不仅可以省去很多常用的封装带来的时间,…

Element浅尝辄止8:Tooltip 文字提示组件

常用于展示鼠标 hover 时的提示信息。 1.如何使用&#xff1f; //使用content属性来决定hover时的提示信息。 //由placement属性决定展示效果&#xff1a;placement属性值为&#xff1a;方向-对齐位置&#xff1b; //四个方向&#xff1a;top、left、right、bottom&#xff1…

C++ 强制转换运算符

强制转换运算符是一种特殊的运算符&#xff0c;它把一种数据类型转换为另一种数据类型。强制转换运算符是一元运算符&#xff0c;它的优先级与其他一元运算符相同。 大多数的 C 编译器都支持大部分通用的强制转换运算符&#xff1a; (type) expression 其中&#xff0c;type …

Java项目-苍穹外卖-Day05-Redis技术应用

1.店铺营业状态设置 需求分析和设计 左上角要求是有回显的 所以至少两个接口 1.查询营业状态接口&#xff08;分为了管理端和用户端&#xff09; 2.修改营业状态接口 因为管理端和用户端路径不同&#xff0c;所以现在是至少三个接口的 可以发现如果存到表里除了id只有一个…

C# List与HashSet的contains()方法查询速度比较

List 和HashSet同时查询40万条数据&#xff0c;谁的效率更高&#xff1f; //**1.下面是List底层源码**public boolean contains(Object o) {//如果查到我们想要查询的值则返回一个true&#xff0c;否则返回false&#xff0c;return indexOf(o) > 0;//这里是调用了indexOf方…

Kafka3.0.0版本——Leader故障处理细节原理

目录 一、服务器信息二、服务器基本信息及相关概念2.1、服务器基本信息2.2、LEO的概念2.3、HW的概念 三、Leader故障处理细节 一、服务器信息 三台服务器 原始服务器名称原始服务器ip节点centos7虚拟机1192.168.136.27broker0centos7虚拟机2192.168.136.28broker1centos7虚拟机…

智慧矿山2.0:煤矿智能化综合管理AI大数据监管平台建设方案设计

一、行业背景 能源与煤矿是我国国民经济的重要物质生产部门和支柱产业之一&#xff0c;同时也是一个安全事故多发的高危行业&#xff0c;施工阶段的现场管理对工程成本、进度、质量及安全等至关重要。煤矿智能化既是未来趋势&#xff0c;更是产业发展需求&#xff0c;建设智慧…

列表类控件虚拟化

WPF列表控件提供的最重要的功能是UI虚拟化&#xff08;WPF编程宝典说的&#xff09;。所有的WPF列表控件&#xff08;所有继承自ItemsControl的控件&#xff0c;包括ListBox、CombBox、ListView、TreeView、DataGrid&#xff09;都支持UI虚拟化。 UI虚拟化的支持实际上没有被构…

vue2.6及以下版本导入 TDesign UI组件库

TDesign 官方文档:https://tdesign.tencent.com/vue/components/button 我们先打开一个普通的vue项目 然后 如果你是 vue 2.6 或者 低于 2.6 在终端执行 npm i tdesign-vue如果你是 2.7 或者更高 执行 npm i tdesign-vuenaruto这里 我们 以 2.6为例 因为大部分人 用vue2 都是…

零知识证明的应用场景-1用户登录

零知识证明&#xff08;Zero-Knowledge Proof, ZKP&#xff09;是一种密码学方法&#xff0c;它允许一方向另一方证明某个陈述的真实性&#xff0c;而不会泄露任何有关该陈述的其他信息。这种技术在许多场景中都非常有用&#xff0c;尤其是在需要保护隐私的场合。 在身份验证的…

sea.js

这里写自定义目录标题 1. 什么是sea.js2. 如何使用 1. 什么是sea.js Seajs是一个模块加载器遵循 CMD 规范模块化开发&#xff0c;依赖的自动加载、配置的简洁清晰。兼容性 Chrome 3Firefox 2Safari 3.2Opera 10IE 5.5 2. 如何使用 去官网下载最新的seajs文件http://seajs.o…

神经网络的工作原理

目录 神经网络的介绍 神经网络的组成 神经网络的工作原理 Numpy 实现神经元 Numpy 实现前向传播 Numpy 实现一个可学习的神经网络 神经网络的介绍 神经网络受人类大脑启发的算法。简单来说&#xff0c;当你睁开眼睛时&#xff0c;你看到的物体叫做数据&#xff0c;再由你…

微服务时代java异常捕捉

一、尽量不要使用e.printStackTrace(),而是使用log打印。 ​反例:​ try{ // do what you want }catch(Exception e){ e.printStackTrace(); } ​ 正例&#xff1a;​ try{ // do what you want }catch(Exception e){ log.info("你的程序有异常啦,{}",e)…

L1-042 日期格式化(Python实现) 测试点全过

题目 世界上不同国家有不同的写日期的习惯。比如美国人习惯写成“月-日-年”&#xff0c;而中国人习惯写成“年-月-日”。下面请你写个程序&#xff0c;自动把读入的美国格式的日期改写成中国习惯的日期。 输入格式 输入在一行中按照“mm-dd-yyyy”的格式给出月、日、年。题目…

2023常见前端面试题

以下是一些2023年秋招常见的前端面试题及其答案&#xff1a; 1. 请解释一下什么是前端开发&#xff1f; 前端开发是指使用HTML、CSS和JavaScript等技术来构建网页和用户界面的过程。前端开发人员负责将设计师提供的视觉设计转化为可交互的网页&#xff0c;并确保网页在不同设备…

LNMT与动静分离 (四十八)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、LNMT 二、Nginx高级配置 2.1 location 2.2 rewirte 2.2.1 应用场景 2.2.2 书写位置 三、动静分离 总结 前言 LNMT是一个高级神经机器翻译系统&#xff0c;它使…

【Python进阶学习】【Excel读写】使用openpyxl写入xlsx文件

1、当前文件不存在指定的子文件夹则创建 2、文件存在追加写入 3、文件不存在创建文件并写入表头 # -*- coding: utf-8 -*- import openpyxl as xl import osdef write_excel_file(folder_path):if not os.path.exists(folder_path):os.makedirs(folder_path)result_path os.p…

Mac操作系统Safari 17全新升级:秋季推出全部特性

苹果的内置浏览器可能是Mac上最常用的应用程序&#xff08;是的&#xff0c;甚至比Finder、超级Mac Geeks还要多&#xff09;。因此&#xff0c;苹果总是为其浏览器Safari添加有用的新功能。在今年秋天与macOS Sonoma一起推出的第17版中&#xff0c;Safari可以帮助你提高工作效…

驱动day10

练习 基于platform实现 设备树 myplatform_homework{compatible "hqyj,myplatform_homework"; //用于获取节点reg <0x12345678 14>;interrupt-parent <&gpiof>; //引用父节点interrupts <9 0>; //这个节点引入的中断管脚led1-gpi…

搜索与图论-拓扑序列

为什么记录呢 因为不记录全忘了 虽然记了也不一定会看 有向无环图一定有拓扑序列邮箱无环图 - 拓扑图 入度为0的点作为起点入度为0的点入队列枚举出边 t->j删掉当前边&#xff0c;t->j . j的入度减1判断j的入度是否为0&#xff0c;来判断是否加入队列 有环&#xff1a; …