HOW - 计时器实践和注意事项

已于 2024-08-01 14:58:00 修改
阅读量554 收藏 6
点赞数 12
文章标签： 前端 计时器
于 2024-08-01 14:52:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58540586/article/details/140847302
版权

目录

一、前言

在HOW - 前端定时器实践（含防抖、interval 模拟）中我们简单了解过 JavaScript 中的计时器以及潜在问题，包括防抖和节流的应用。那今天我们进一步来学习计时器实践和注意事项。

二、具体介绍

在前端项目中使用 setTimeout 和 setInterval 执行定时任务是很常见的，但在实践中需要注意以下几个方面，以确保代码的正确性和性能：

1. 清理定时器

在组件卸载或不再需要定时器时，务必清理定时器，以避免内存泄漏和不必要的计算：

比如在 React 项目中，使用 clearTimeout 和 clearInterval: 在组件的 useEffect 钩子中，可以返回一个清理函数来清除定时器。

示例:

import React, { useEffect } from 'react';

const TimerComponent: React.FC = () => {
    useEffect(() => {
        const timerId = setInterval(() => {
            console.log('Interval task');
        }, 1000);

        return () => clearInterval(timerId); // 清理定时器
    }, []);

    return <div>Timer Component</div>;
};

2. 避免使用过多的定时器

大量使用定时器可能会导致性能问题，特别是在浏览器中。如果你需要多个定时任务，考虑合并它们或者使用更合适的机制，如 requestAnimationFrame 或者 Web Workers。

3. 处理定时器的延迟和准确性

  • setTimeout 和 setInterval 的延迟不一定精确: 特别是在 CPU 使用率很高的情况下，定时器可能会有延迟。setInterval 的实际间隔可能会比预期长。

  • 适当使用 Date.now() 或 performance.now(): 如果你需要更精确的时间管理，可以使用 Date.now() 或 performance.now() 来计算实际的时间间隔。

示例:

const timerId = setInterval(() => {
    const now = performance.now();
    console.log(`Interval at ${now}`);
}, 1000);

4. 避免在定时器中访问过期的状态

如果定时器引用了组件的状态或属性，确保在定时器执行时这些引用仍然有效。否则，你可能会遇到状态过期的问题。

例如，在 React 项目中，使用 useRef 或在清理函数中取消定时器可以避免这种问题。

示例:

import React, { useEffect, useRef } from 'react';

const TimerComponent: React.FC = () => {
    const countRef = useRef(0);

    useEffect(() => {
        const timerId = setInterval(() => {
            countRef.current += 1;
            console.log(countRef.current);
        }, 1000);

        return () => clearInterval(timerId);
    }, []);

    return <div>Timer Component</div>;
};

5. 考虑使用 requestAnimationFrame

对于需要频繁更新 UI 或进行动画的任务，使用 requestAnimationFrame 可能更合适。它会在浏览器下一次重绘之前调用回调函数，从而提供更流畅的动画效果。

示例:

import React, { useEffect, useRef } from 'react';

const AnimationComponent: React.FC = () => {
    const requestIdRef = useRef<number>(0);

    const animate = () => {
        console.log('Animation frame');
        requestIdRef.current = requestAnimationFrame(animate);
    };

    useEffect(() => {
        requestIdRef.current = requestAnimationFrame(animate);

        return () => cancelAnimationFrame(requestIdRef.current); // 清理动画帧
    }, []);

    return <div>Animation Component</div>;
};

6. 注意组件的生命周期

确保定时器不会在组件的生命周期中导致问题，例如在组件卸载时定时器还在运行，或者在组件重新渲染时创建了重复的定时器。

当然！确保定时器在组件的生命周期内不会导致问题是很重要的。以下是一些代码示例，展示了如何在 React 组件中正确使用和清理定时器，以避免在组件卸载时定时器仍在运行，或者在组件重新渲染时创建重复的定时器。

示例 1: 使用 useEffect 清理定时器

在 useEffect 中设置定时器，并在组件卸载时清理定时器：

import React, { useEffect, useState } from 'react';

const TimerComponent: React.FC = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        // 创建定时器
        const timerId = setInterval(() => {
            setCount(prevCount => prevCount + 1);
        }, 1000);

        // 清理定时器
        return () => {
            clearInterval(timerId);
        };
    }, []); // 依赖数组为空，确保定时器只在组件挂载时创建一次

    return <div>Count: {count}</div>;
};

示例 2: 避免在重新渲染时创建重复的定时器

在 useEffect 中管理定时器，确保每次重新渲染时不会创建新的定时器：

import React, { useEffect, useRef, useState } from 'react';

const TimerComponent: React.FC = () => {
    const [count, setCount] = useState(0);
    const timerRef = useRef<NodeJS.Timeout | null>(null);

    useEffect(() => {
        // 创建定时器
        timerRef.current = setInterval(() => {
            setCount(prevCount => prevCount + 1);
        }, 1000);

        // 清理定时器
        return () => {
            if (timerRef.current) {
                clearInterval(timerRef.current);
            }
        };
    }, []); // 依赖数组为空，确保定时器只在组件挂载时创建一次

    return <div>Count: {count}</div>;
};

示例 3: 动态依赖的定时器

如果定时器的行为依赖于组件的 props 或 state，可以在 useEffect 中添加依赖，并确保每次更新时清理旧的定时器：

import React, { useEffect, useRef, useState } from 'react';

const TimerComponent: React.FC<{ delay: number }> = ({ delay }) => {
    const [count, setCount] = useState(0);
    const timerRef = useRef<NodeJS.Timeout | null>(null);

    useEffect(() => {
        // 清理上一个定时器（如果存在）
        if (timerRef.current) {
            clearInterval(timerRef.current);
        }

        // 创建新的定时器
        timerRef.current = setInterval(() => {
            setCount(prevCount => prevCount + 1);
        }, delay);

        // 清理定时器
        return () => {
            if (timerRef.current) {
                clearInterval(timerRef.current);
            }
        };
    }, [delay]); // 当 delay 改变时重新创建定时器

    return <div>Count: {count}</div>;
};

这些实践有助于避免在组件卸载时定时器仍在运行，或在组件重新渲染时创建重复的定时器，从而确保组件行为的正确性和性能。

7. 避免阻塞主线程

避免在定时器中执行耗时的操作，这样可以防止阻塞主线程，导致应用响应变慢。

总结

在前端项目中使用 setTimeout 和 setInterval 时，要注意清理定时器、避免过多使用、处理定时器的延迟和准确性、避免访问过期的状态、选择合适的定时方法（如 requestAnimationFrame）、考虑组件的生命周期，以及避免阻塞主线程。通过遵循这些实践，可以提高代码的可靠性和性能。

三、页面进入后台和重新回到前台场景

有个更进一步的问题，在页面进入后台或者重新回到前台，定时器的工作机制？

当页面进入后台（即不可见）或重新回到前台（即可见）时，定时器的工作机制可能会受到浏览器的影响。

浏览器通常会对不可见的页面进行性能优化，以减少资源消耗，这会影响 setTimeout 和 setInterval 的行为。

以下是一些关键点和建议，以确保定时器在这些情况下能够正确工作：

1. 浏览器优化

  • 页面不可见时的性能优化: 许多现代浏览器会在页面不可见时暂停定时器（例如，setInterval）或降低其调用频率。这是为了节省资源和电池寿命。

  • 文档可见性 API: 使用 document.visibilityState 和 visibilitychange 事件来检测页面是否可见，并根据需要调整定时器的行为。

示例:

import React, { useEffect, useRef, useState } from 'react';

const TimerComponent: React.FC = () => {
    const [count, setCount] = useState(0);
    const timerRef = useRef<NodeJS.Timeout | null>(null);

    const handleVisibilityChange = () => {
        if (document.visibilityState === 'visible') {
            // 页面重新变为可见，重新启动定时器
            if (!timerRef.current) {
                timerRef.current = setInterval(() => {
                    setCount(prevCount => prevCount + 1);
                }, 1000);
            }
        } else {
            // 页面变为不可见，清理定时器
            if (timerRef.current) {
                clearInterval(timerRef.current);
                timerRef.current = null;
            }
        }
    };

    useEffect(() => {
        // 设置定时器
        timerRef.current = setInterval(() => {
            setCount(prevCount => prevCount + 1);
        }, 1000);

        // 监听可见性变化
        document.addEventListener('visibilitychange', handleVisibilityChange);

        // 清理
        return () => {
            if (timerRef.current) {
                clearInterval(timerRef.current);
            }
            document.removeEventListener('visibilitychange', handleVisibilityChange);
        };
    }, []);

    return <div>Count: {count}</div>;
};

2. 使用 requestAnimationFrame

requestAnimationFrame 会在页面的下一次重绘前调用回调函数，并且当页面不可见时，浏览器会暂停 requestAnimationFrame 调用。这对于动画任务是有利的，但如果需要持续运行的定时任务，可能需要结合其他机制。

示例:

import React, { useEffect, useRef, useState } from 'react';

const AnimationComponent: React.FC = () => {
    const [count, setCount] = useState(0);
    const requestIdRef = useRef<number>(0);

    const animate = () => {
        setCount(prevCount => prevCount + 1);
        requestIdRef.current = requestAnimationFrame(animate);
    };

    useEffect(() => {
        requestIdRef.current = requestAnimationFrame(animate);

        // 页面不可见时停止动画
        const handleVisibilityChange = () => {
            if (document.visibilityState === 'visible') {
                requestIdRef.current = requestAnimationFrame(animate);
            } else {
                cancelAnimationFrame(requestIdRef.current);
            }
        };

        document.addEventListener('visibilitychange', handleVisibilityChange);

        return () => {
            cancelAnimationFrame(requestIdRef.current);
            document.removeEventListener('visibilitychange', handleVisibilityChange);
        };
    }, []);

    return <div>Count: {count}</div>;
};

总结

  • 浏览器优化: 现代浏览器会对不可见页面的定时器进行优化。使用 document.visibilityState 和 visibilitychange 事件可以帮助你处理这些情况。
  • requestAnimationFrame: 对于动画任务，requestAnimationFrame 是更合适的选择，但也会受到浏览器优化的影响。

这些实践可以帮助你在前端项目中处理定时器，确保它们在页面可见和不可见状态下的行为符合预期。

那假如我们希望在后台仍然执行定时任务呢？

这里有两个相关话题的讨论，可以阅读和参考。

@PHARAOH
关注
  • 12
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2021-07-07
weixin_56136851的博客
07-07 1002
****安顺学院 ANSHUN UNIVERSITY 本 科 毕 业 论 文 （2017～2021年） 题 目： 数学逻辑基础数字闹钟**** 院 别： 数计学院 专业班级： 20计本二级 学生姓名： 范磊磊；王亚林号：2020...
C++项目实战--01
weixin_46235863的博客
11-03 1021
C++项目实战--01
【编程实践】Google Guava 极简教程
热门推荐
禅与计算机程序设计艺术
02-24 1万+
前言Guava 工程包含了若干被 Google 的 Java 项目广泛依赖 的核心库，我们希望通过此文档为 Guava 中最流行和最强大的功能，提供更具可读性和解释性的说明。适用人群本教程是基础教程，适合基础Java开发者的进阶学习。Adding Guava to your project将 Guava 添加到您的项目中Guava comes in two flavors番石榴有两种口味One ...
React 单元测试实践
yeyeye0525的博客
11-09 2196
本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。 React单元测试实践 单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。单元测试是由程序员自己来完成，最终受益的也是程序员自己。执行单元测试，就是为了尽量证明这段代码的行为和期望的一致。 其实我们每天都在做单元测试，包括那些认为自己从来没有写过单元测试的同事。你写了一个函数，log一下或者在界面上点一下，这，也是单元测试，把这种单元测试称为临时单元测试。临时单元测试.
How-to-build-toolchain.pdf
07-11
arm 公司 的编译gcc toochain 教程，不依赖本地环境，属于编译技术，有兴趣的同学可以参考
how-to-optimize-gemm
05-12
目录重复相同的优化进一步优化阻塞以保持性能打包到连续内存中致谢 相关链接BLISlab：优化GEMM的沙箱GEMM：从纯C到SSE优化的微内核 致谢该材料部分由美国国家科学基金会（ACI-1148125 / 1340293和ACI-1550493）赞助...
小学语法how-many-和how-much区别.doc
10-11
在小学英语语法中，"how many" 和 "how much" 是两个非常重要的概念，它们用于询问数量，但针对的对象不同。 1. **how many** 主要用来修饰**可数名词的复数形式**。它的基本句型是："How many + 复数名词 + 一般...
how-tomcat-works-master_howtomcatworks_
10-01
"how-tomcat-works-master_howtomcatworks_"是一个关于Tomcat工作原理的源码分析项目，经过整理后可以在IntelliJ IDEA中直接运行，为开发者提供了一手的实践平台。 首先，我们要了解Tomcat的核心组件。Tomcat主要由...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 933
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 500
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
【前端面试】九、框架
weixin_49015558的博客
07-31 298
1 Vue2 实现方式 2 Vue3 实现方式 3 React 实现方式 4 Angular 实现方式
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 470
对于上云api开发学习过程中的错误教训积累总结
electron 主进程和渲染进程
qq_21087199的博客
07-29 333
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1770
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
前端代码混淆加密（使用Terser、WebpackObfuscator）
@Fonden
07-30 305
（注意Terser和WebpackObfuscator引入的方式不同，后者是放到plugins中）② 在 Terser 之后使用 WebpackObfuscator 进行混淆。以此在网上查找到相应工具有：Terser、WebpackObfuscator。① 使用 Terser 进行代码压缩和 source map 生成，② 设置在生产环境中才去使用混淆加密工具（开发环境会产生各种报错）为了对公司项目进行安全防护措施，前端需要进行代码混淆加密处理。压缩代码、变量和函数名混淆、删除未使用代码。
【前端面试3+1】20 css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理、【二叉树的中序遍历】
qq_61798306的博客
07-30 521
本文包含八股文：css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理，算法【二叉树的中序遍历】
前端面试宝典【设计模式】【2】
最新发布
BDawn的专栏
07-31 142
工厂模式是一种创建型设计模式，它提供了一种创建对象的机制，而不暴露创建逻辑，将对象的实例化推迟到子类。工厂模式的主要目的是封装对象的创建过程，使其能够独立于客户端代码，从而提高系统的可扩展性和灵活性。工厂模式通常分为三种类型：简单工厂模式、工厂方法模式和抽象工厂模式。 模块模式是一种在 JavaScript 中实现封装和私有成员的常用设计模式。它允许你创建具有私有变量和公共方法的对象，从而避免全局命名空间的污染，并提供更好的代码组织和可维护性。模块模式通常使用立即执行的函数表达式来创建私有作用域。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值