react组件 使用setTimeout 定时隐藏 (有demo)

最新推荐文章于 2024-08-23 15:19:21 发布
最新推荐文章于 2024-08-23 15:19:21 发布
阅读量6.7k 收藏 3
点赞数
分类专栏： react 文章标签： react组件 定时隐藏 setTimeout 有demo codepen demo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Candy_home/article/details/76599867
版权
这篇博客详细介绍了如何在React组件中利用setTimeout实现图片的定时隐藏功能。首先阐述了功能需求，包括组件初始化及按钮点击时各展示图片1次，并在1秒后自动隐藏。接着解释了实现原理，通过绑定this并使用匿名函数和setTimeout来设定定时隐藏。提供了关键代码示例，如在componentDidMount生命周期方法中初次执行，以及showSaveCover方法中展示后的隐藏操作。此外，还给出了DEMO地址供读者实践操作。
摘要由CSDN通过智能技术生成

功能需求

1>初始化时 展示 1次 图片，1秒后，隐藏图片

2>点击 按钮 展示 1次 图片，1秒后，隐藏图片



原理

绑定this本身，使用匿名函数

使用setTimeout定时


最低0.47元/天 解锁文章
Candy_home
关注
专栏目录
《React-Native系列》18、 RN之定时器Timer
等待就是浪费青春
08-17 1万+
在web开发中，我们通常需要使用定时器功能，使用setTimeout和setInterval函数。 那么在ReactNative中，是否也提供了定时器的功能呢？ 答案是肯定的。 我们还是先看看官网怎么说的。 定时器是一个应用中非常重要的部分。React Native实现了和浏览器一致的定时器Timer。 提供的方法如下： setTimeout, clearTimeout s
react中settimeout_react 中使用setTimeout
weixin_36303305的博客
12-23 661
React中使用setTimeoutsetTimeout做轮询React由于是在内存中运行，所以即使是DOM对象已经被销毁了，如果在组件卸载(componentWillUnmount)的时候没有清楚掉定时器， setTimeout做循环还是会在内存中一直运行componentWillUnmount() {this.state.brush && clearTimeout(this.s...
React.js setTimeout
A_Rocky的博客
01-01 1193
setTimeout(() => {this.explain()}, 1000);
react如何解决setTimeout获取不到最新数据问题
最新发布
Misnice的博客
08-23 519
react如何解决setTimeout获取不到最新数据问题
setTimeout用法:利用setTimeout在页面上不停的显示当前日期时间
koushr的博客
07-25 1423
function showTime() { var mydate = new Date(); var year = mydate.getFullYear(); var month = mydate.getMonth(); month = month + 1; var day = mydate.getDate(); var hour = mydate.getHours();
setTimeout
qq_40774743的博客
05-29 179
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    &
React Refs 使用场景及核心要点
老司机的后备箱
08-12 1039
Refs 是 React 提供的用来保存 object 引用的一个解决方案，在函数式组件使用 useRef 创建一个 ref 对象，ref 对象存在一个可直接修改的 current 属性，内容都是存在 current 上。Refs 使用场景主要分为两个方向，其一是实现 DOM 访问与操控、在两次render之间传递数据内容【和state机制有很大不同，下文会有对比介绍】。...
【React 框架】路由 / react-router-dom 相关 API / 嵌套路由 / 路由组件传递参数 / 编程式路由导航
qq_30148319的博客
07-07 524
（1）单页 Web 应用（single page web application，SPA）。 （2）整个应用只有一个完整的页面。 （3）点击页面中的链接不会刷新页面，只会做页面的局部更新。 （4）数据都需要通过 ajax 请求获取，并在前端异步展现。 （1）一个路由就是一个映射关系 ( key：value )。 （2）key 为路径，value可能是 function 或 component。2.2.1 后端路由 （1）理解
React-Native 之 项目实战(三)
黑森林工作室
04-01 1525
前言 本文有配套视频，可以酌情观看。 文中内容因各人理解不同，可能会有所偏差，欢迎朋友们联系我。 文中所有内容仅供学习交流之用，不可用于商业用途，如因此引起的相关法律法规责任，与我无关。 如文中内容对您造成不便，烦请联系 277511806@qq.com 处理，谢谢。 转载麻烦注明出处，谢谢。 本篇资源：链接: https://pan.baidu.com/s/1jIbW2n8 密码: wqe
css动画多条数据向上滚,React 列表向上、向下循环滚动
weixin_26757925的博客
08-04 1566
实现的效果:效果图.gif实现步骤开始滚动：setInterval() 定时调用滚动方法停止滚动：clearInterval() 取消定时器向上滚动方法：1、数组第一条添加到数组末尾 - push()2、列表向上滚动添加css3过渡动画3、计算向上滚动距离(第一条数据高度，如果高度固定用固定值即可)4、删除数组第一条数据 - shift()5、向上滚动距离清零6、取消过渡动画停止滚动向下滚动方法：...
React-Native之定时器Timer的实现代码
11-27
在web开发中，我们通常需要使用定时器功能，使用setTimeout和setInterval函数。 那么在ReactNative中，是否也提供了定时器的功能呢？ 答案是肯定的。 我们还是先看看官网怎么说的。 定时器是一个应用中非常重要的部分。React Native实现了和浏览器一致的定时器Timer。 提供的方法如下： setTimeout, clearTimeout setInterval, clearInterval setImmediate, clearImmediate requestAnimationFrame, cancelAnimationFrame set
RN 中setTimeout不好使
07-28 1314
这个主要是由于打开了 chrome调试， 调试模式打开了调试器。所以不要阻塞，使得在使用setTimeout中错误
react控制元素动态消失隐藏
weixin_30443895的博客
04-09 1678
首先是component里面的jsx页面，这里用了AntDesigne的Alert {!this.props.selfInfo.hidden?( <span className={styles.updateSuccess}> <Alert message={this.props.selfInfo.msg} ...
【ReactNative 】【定时器、延时执行】setTimeout、setInterval、setImmediate
Crazy程序猿
04-03 2048
setTimeout、setInterval、setImmediate 用法总结
React 函数组件中无法清除定时器问题
kiku
07-27 3097
函数组件的本质是一个函数，而在在一个局部函数中，函数每一次执行，都会在把函数的变量重新生成一次。
react中元素的显示和隐藏方式的使用（函数组件）
m0_72715879的博客
11-09 3280
react+hooks 做显示和隐藏
react-native setTimeout失效
littlesecondwolf的博客
04-27 341
因为chrome debug的问题，把debug关了就没事了。。挺坑的。在这记一下。
React中定时器的使用及清除
热门推荐
聚沙成塔
02-02 1万+
注意点 1、定时器中this一般指向为window对象 2、react箭头函数中定时器中也可以使用this,为当前class对象   实践： 1、定时器赋值给全局变量，异步动作后清除 class TopoPanel extends Component { constructor(props) { } startGetTopoDataInterval = ()...
React实战：Tree组件详细使用教程
"React实践之Tree组件的使用方法，包括数据结构、渲染、展开合并功能的实现，并提供了组件引用及实现代码示例" 在React应用中，Tree组件是一种常见的UI元素，用于展示层级关系的数据，如目录结构或组织架构。在本篇...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值