使用react hooks写一个倒计时功能

先要明确的是,setTimeout函数中执行代码的时间肯定是要大于等于setTimeout时间的,那么就可能出现设定的 1 秒,实际执行却执行了 2 秒的情况,那么我们的实现思路也很简单,每次计算一下setTimeout实际执行的时间,然后动态的调整下一次执行的时间,而不是设置固定的值

第n次执行 executionTime 实际执行时间 nextTime 下次需要执行的时间 totleTime 执行的总时间
0 0 1000 0
1 1200 800 1200
2 1100 700 2300
3 1000 700 3300
4 2200 500 5500
5 1300 200 6800
6 1200 1000 8000

const useCountDown = ({ leftTime, ms = 1000, onEnd }) => {
    const countdownTimer = useRef();
    const startTimer = useRef();
    //记录初始时间
    const startTimeRef = useRef(performance.now());
    // 第一次执行的时间处理,让下一次倒计时时调整为整数
    const nextTimeRef = useRef(leftTime % ms);

    const [count, setCount] = useState(leftTime);

    const clearTimer = () => {
        countdownTimer.current && clearTimeout(countdownTimer.current);
        startTimer.current && clearTimeout(startTimer.current);
    };

    const startCountDown = () => {
        clearTimer();
        const currentTime = performance.now();
        // 算出每次实际执行的时间
        const executionTime = currentTime - startTimeRef.current;

        // 实际执行时间大于上一次需要执行的时间,说明执行时间多了,否则需要补上差的时间
        const diffTime =
            executionTime > nextTimeRef.current
                ? executionTime - nextTimeRef.current
                : nextTimeRef.current - executionTime;

        setCount((count) => {
            const nextCount =
                count - (Math.floor(executionTime / ms) || 1) * ms - nt;
            return nextCount <= 0 ? 0 : nextCount;
        });

        // 算出下一次的时间
        nextTimeRef.current =
            executionTime > nextTimeRef.current ? ms - diffTime : ms + diffTime;

        // 重置初始时间
        startTimeRef.current = performance.now();

        countdownTimer.current = setTimeout(() => {
            requestAnimationFrame(startCountDown);
        }, nextTimeRef.current);
    };

    useEffect(() => {
        setCount(leftTime);
        startTimer.current = setTimeout(startCountDown, nextTimeRef.current);
        return () => {
  clearTimer();
        };
    }, [leftTime]);

    useEffect(() => {
        if (count <= 0) {
            clearTimer();
            onEnd && onEnd();
        }
    }, [count]);

    return count;
};

export default useCountDown;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

代码+视频,R语言绘制生存分析模型的时间依赖(相关)性roc曲线和时间依赖(相关)性cindex曲线

ROC曲线分析是用于评估一个因素预测能力的手段&#xff0c;是可以用于连续型变量分组的方法。在生存分析中&#xff0c;疾病状态和因素取值均会随时间发生变化。而标准的ROC曲线分析将个体的疾病状态和因素取值视作固定值&#xff0c;未将时间因素考虑在分析之中。在这种情况下…

edge使用心得

1. **性能提升**&#xff1a;基于Chromium的Edge浏览器在速度和响应方面有显著提升&#xff0c;特别是在处理复杂的网页结构和执行JavaScript代码时。这意味着无论是日常浏览还是运行Web应用程序&#xff0c;都能享受流畅的用户体验。 2. **更好的兼容性**&#xff1a;由于与G…

大模型最新消息

最新消息如下&#xff1a; 大语言模型服务的多样化&#xff1a;互联网上出现了许多免费的大语言模型服务&#xff0c;如OpenAI的ChatGPT、Google的Gemini、Anthropic的Claude、Meta的Llama等。这些服务的推出使得大语言模型的应用更加广泛和便捷。软银和苹果的AI新动向&#x…

​​【收录 Hello 算法】3.3 数字编码

目录 3.3 数字编码 3.3.1 原码、反码和补码 3.3.2 浮点数编码 3.3 数字编码 Tip 在本书中&#xff0c;标题带有 * 符号的是选读章节。如果你时间有限或感到理解困难&#xff0c;可以先跳过&#xff0c;等学完必读章节后再单独攻克。 3.3.1 原码、反码和补码 在…

迅睿CMS中实现关键词搜索高亮

在迅睿CMS系统中实现关键词搜索高亮是提升用户体验和搜索效果的重要手段。当用户搜索某个关键词时&#xff0c;将搜索结果中的关键词高亮显示&#xff0c;可以帮助用户更快速地定位到所需信息。 关键词高亮的实现 在迅睿CMS中&#xff0c;你可以使用内置的dr_keyword_highlig…

Study--Oracle-01-单实例部署Oracle11G-R2

Oracle版本发布介绍 Oracle 19c和12c和11g功能区别_数据库_oracle_支持 一、CentOS 7 环境准备 1、软件准备 操作系统&#xff1a;CentOS 7 数据库版本: Oracle11g R2 2、操作系统环境配置 关闭selinux &#xff0c;编辑 /etc/selinux/config文件&#xff0c;设置SELINU…

C语言例题34、反向输出字符串(递归方式)

题目要求&#xff1a;输入5个字符后&#xff0c;使用递归方式逆序输出 #include <stdio.h>void reverse(int num) {char cur_char;if (num 1) {cur_char getchar();printf("逆序输出为&#xff1a;");putchar(cur_char);} else {cur_char getchar();revers…

宏电全栈式IoT赋能供排水智能监测,护航城市生命线

城市供水、排水系统是维系城市正常运行、满足群众生产生活需要的重要基础设施&#xff0c;是城市的“生命线”。随着城市化进程加快&#xff0c;城市规模不断扩大&#xff0c;地下管线增长迅速&#xff0c;城市“生命线安全”的监管日益面临挑战。 宏电作为物联网行业的领航者…

软件测试与管理:黑盒测试-等价类划分法和 边界值分析法

知识思维导图&#xff1a; 例题1&#xff1a;日期检查功能的等价类划分 设有一个档案管理系统&#xff0c;要求用户输入以年月表示的日期。假设日期限定在1990年1月~2049年12月&#xff0c;并规定日期由6位数字字符组成&#xff0c;前4位表示年&#xff0c;后2位表示月。现用等…

后台启动HIVE的JDBC连接

后台启动HIVE的JDBC连接 生活就像一杯咖啡&#xff0c;有时苦涩&#xff0c;有时香甜&#xff0c;但都是值得品味的经历。无论遇到什么挑战&#xff0c;记住在每一天的开始&#xff0c;你都有机会给自己倒上一杯清新的力量&#xff0c;为心灵添一抹温暖。勇敢地面对生活的苦与甜…

10000 字详细讲解 Spring 中常用注解及其使用

如下图京东购物页面&#xff0c;当我们选择点击访问某一类商品时&#xff0c;就会向后端发起 HTTP 请求&#xff0c;当后端收到请求时&#xff0c;就会找到对应的代码逻辑对请求进行处理&#xff0c;那么&#xff0c;后端是如何来查找处理请求相对应的代码呢&#xff1f;答案就…

C++使用单链表实现一元多项式的加,乘操作

相邀再次喝酒 待 葡萄成熟透 但是命运入面 每个邂逅 一起走到了 某个路口 是敌与是友 各自也没有自由 位置变了 各有队友 首先&#xff0c;按照惯例&#xff0c;十分欢迎大家边听歌边观看本博客&#xff01;&#xff01; 最佳损友 - 陈奕迅 - 单曲 - 网易云音乐 (163.com) 一…

leetcode295. 数据流的中位数

class MedianFinder {//A为小根堆&#xff0c;B为大根堆List<Integer> A,B;public MedianFinder() {A new ArrayList<Integer>();B new ArrayList<Integer>();}public void addNum(int num) {int m A.size(),n B.size();if(m n){insert(B,num);int top …

开源模型 Prometheus 2 能够评估其他语言模型,其效果几乎与 GPT-4 相当

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

springboot使用研究

map-underscore-to-camel-case: true 开启驼峰命名 GetMapping("/userInfo")public Result<Users> userInfo(RequestHeader(name "Authorization") String token,HttpServletResponse response) {Map<String, Object> map JwtUtil.parseT…

Java | Spring框架|Bean的装配之注解配置

Spring | Bean的装配之 注解配置&#xff1a;简化配置的新标准 Spring框架的注解配置是近年来流行的配置方式&#xff0c;它通过在Java代码中使用注解来简化Bean的配置。这种方式减少了XML配置文件的使用&#xff0c;使得Bean的定义更加直观和简洁。 一、 使用注解定义Bean …

Problem 5: Whack-A-Mole打地鼠

实战题&#xff1a;打地鼠 内容如附件所示&#xff1a; 测试数据为:1,2,4,8,9,10,11,14 答案为&#xff1a;10,2,4 原始分布&#xff1a; 击打10号 击打2号 击打4号 要求&#xff0c;所示实例解以图示的方式给出&#xff0c;并且5组测试数据都需要测试&#xff0c;…

软件工程案例学习-图书管理系统-面向对象方法

文档编号&#xff1a;LMS_1 版 本 号&#xff1a;V1.0 ** ** ** ** ** ** 文档名称&#xff1a;需求分析规格说明书 项目名称&#xff1a;图书管理系统 项目负责人&#xff1a;计敏 胡杰 ** ** …

开式双比例泵控制放大器

比例泵PQ控制放大器的主要作用是通过接收来自控制器的信号&#xff0c;并将其转换为适当的电流信号&#xff0c;以驱动变量泵。这种控制方式可以实现对泵输出流量和压力的精确控制&#xff0c;从而实现节能和提高效率的目的。比例泵PQ控制放大器通常用于节能型泵控制系统中&…

【Linux系列】tail查询使用

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
最新文章