首页 > 其他分享 >【React】定时器组件

【React】定时器组件

时间:2023-05-17 12:34:36浏览次数:34  
标签:current 定时器 const timer React 组件 null

鼠标移入关闭定时器并清除,鼠标移出组件的时候打开定时器进行循环

const timer = useRef(null);


  
useEffect(() => {
    startLoop();
  }, []);
  const startLoop = () => {
    stopLoop();
    timer.current = window.setInterval(() => {
      //要干的事
    }, 60 * 1000);
  };
  const stopLoop = (event) => {
    if (timer.current) {
      window.clearInterval(timer.current);
      timer.current = null;
    }
  };
  
/////////////////////////////////////////
  return (
    <div
      onm ouseOver={stopLoop}//移出关闭
      onm ouseOut={startLoop}//移入开启
    >
    </div>
  );

 

标签:current,定时器,const,timer,React,组件,null
From: https://www.cnblogs.com/Esai-Z/p/17408252.html

相关文章

  • 求教一个问题,关于elementplus的el-input-number组件问题
    问题描述:我想让组件默认展示placeholder的值,但是他默认显示的是0,网上搜到的方法都是说将默认值设成undefined,但是我试了并不好用问题代码如下: <el-input-numberv-model="state.form.throwTargetNum"class="range-input":......
  • 组件的循环引用
    1、递归组件:组件在自己的模板中调用自身。2、循环引用:当父引用子,子引用父时。直接给大家上代码:MulAnalysisResult.vue1<template>2<divv-loading="loading">3<divv-for="(item,index)indataList":key="index">4<h6>{{ite......
  • 【Cocos2d游戏开发之七】添加/删除系统组件,并解决View设置透明会影响View中的其他组件
    好像有段时间没有更新了,主要项目比较着急,不过现在cocos2d基本算是全拿下了,进展很顺利,那么在这里主要给大家介绍下一些Himi遇到的问题;本章介绍两个知识点:        1.在Cocos2d中添加系统组件;(本例中添加UIView并嵌套一些View)  “   如何把背景图片设置为半透明......
  • 码良本地化gods-pen脚手架不显示组件标签问题处理
    问题描述先说下问题的现象,在进行码良本地化时,使用gods-pen创建组件时,进行到组件标签选择时,没有选项。问题猜想gods-pen是放在npm上的,应该没有改变,不会出现问题,所以组件标签可能是存在数据库中,码良初始化脚本缺少初始数据。以上猜想可以通过两种方式验证:首先从数据库中查看......
  • RPA之PAD(Power Automate Desktop)组件开发
    PowerAutomateDesktop组件开发其实,PAD,现在官方文档还没有对外组件式或者插件式开发接口。但是,有一些志同道合的朋友,比如(潘淳),潘总大佬,在RPA领域,还是很牛逼的。只要有一扇门,就会有一个世界,现在已经有了一扇门(毕竟是.NetFramework,那么,研究借鉴就容易多了)。组件开发环境默认组......
  • ReactNative 配置路径别名
    1、安装依赖 babel-plugin-module-resolveryarnaddbabel-plugin-module-resolver-D 2、配置babel.config.jsmodule.exports={presets:['module:metro-react-native-babel-preset'],plugins:[['@babel/plugin-proposal-decorators......
  • BY组态-低代码web可视化组件
    简介BY组态是贵州九元四方科技完全自主研发的集实时数据展示、动态交互等一体的全功能可视化平台。帮助物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等场景快速实现数字孪生、大屏可视化、Web组态、SCADA等解决方案。具有实时监控、多样、变化、动态交......
  • Vue、React和小程序都是流行的前端开发框架/平台
    Vue、React和小程序都是流行的前端开发框架/平台,它们各有优缺点。Vue的优点:简单易学:Vue的语法简单明了,易于理解和学习。渐进式框架:Vue可以逐渐地集成到现有项目中,也可以作为完整的单页应用程序开发。响应式设计:Vue的响应式设计使得数据变化后UI自动更新,方便快捷。高......
  • 【Java】定时器CronExpression参数规则
    参考:定时器CronExpression配置说明详解-心和梦的方向-博客园(cnblogs.com) 项目中经常要使用到定时器,其中CronExpression配置非常重要。现在就配置说明详细解说一下:CronExpression表达式是由6个必需字段(秒、分、时、日、月、周)和一个可选字段(年)通过空格组成。cronExpres......
  • React-hooks 父组件通过ref获取子组件数据和方法
    我们知道,对于子组件或者节点,如果是class类,存在实例,可以通过React.createRef()挂载到节点或者组件上,然后通过this获取到该节点或组件。classRefTestextendsReact.Component{constructor(props){super(props);this.myRef=React.createRef();}......