关于setInterval遇到的一个有趣的坑

最新推荐文章于 2022-09-19 15:43:59 发布

大聪明397

最新推荐文章于 2022-09-19 15:43:59 发布

阅读量729

点赞数 2

分类专栏：踩坑记录文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/weixin_48391468/article/details/123125370

版权

在学习React Hooks时，作者遇到一个计时器组件的问题：点击开始后，再次点击开始并暂停，计时器无法正确停止，且连续点击开始会使时间增长加快。分析发现，每次开始时未清除旧的定时器，导致多个定时器同时控制时间。解决方案是每次开始时清除定时器。此外，由于事件循环机制，每次start后的首次计时会大于设定的1000ms。了解事件循环的工作原理有助于避免此类问题。

摘要由CSDN通过智能技术生成

问题复现

今天学习hooks的时候，做到一个demo，做一个计时器组件，这个组件有开始和暂停两个功能
这确实是一个很简单的功能，只需要使用window.setInterval来提供计时功能，用useRef来保存计时器的引用，这样可以随时暂停，最开始我的设计如下：

import React, {
    useState, useCallback, useRef } from "react";

export const Timer = () => {
   
	//计时器状态及引用
  const [time,setTime] = useState(0);
  const timer = useRef(null);//timer用以跨组件渲染之间保存变量

	//开始计时
  const handleStart = () => {
   
    timer.current = window.setInterval(() => {
   
      setTime(