setInterval中this
今天使用react做钟表，自然用到了setInterval，但是出现this指向不明的问题。
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body> <div id="example"></div>
<script type="text/babel">
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
} componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
} componentWillUnmount() {
clearInterval(this.timerID);
} tick() {
this.setState({
date: new Date()
});
} render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
} ReactDOM.render(
<Clock />,
document.getElementById('example')
);
</script> </body>
</html>
在componentDidMount中setInterval使用了ES6的箭头函数，有建议可以使用ES6以前的函数是这样
let that = this;
this.timerID = setInterval(function () {
return that.tick();
},1000);
这样使可以的，但是过于繁琐，观察了一下，setInterval第一个参数不就是传一个函数就行嘛，干嘛这么费劲，于是我这样写
this.timerID = setInterval(
this.tick,
1000);
结果报错了
什么？找不到setState，那就是this不对啊，果然setInterval中第一个参数若果是一个裸函数的话，函数中this指向的是window。
于是改为
this.timerID = setInterval(
this.tick.bind(this),
1000);
完美运行！
setInterval中this的更多相关文章
- 利用函数回调获取setInterval中返回的值
我们都知道,定时器里面想返回值如果你用return根本没作用,那么怎么拿到定时器所返回的值呢, 现在只需要利用回调函数,给主函数传一个函数类型的参数callback,然后把想要返回的num再传给cal ...
- 关于setInterval和setTImeout中的this指向问题
前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例: var num = 0; function ...
- 【转】JS中setTimeout和setInterval的最大延时值详解
前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...
- JavaScript中setInterval关闭问题
这篇博客主要记录下学习中碰到的一些问题(以防忘记). JavaScript中,在setInterval中关闭该定时器,但是此次执行也会完成,用语言描述不太容易,直接看代码: var i=1; var ...
- 【原】理解javascript中的this
最近的文章基本都是总结javascript基础内容的,因为我觉得这些东西很重要.而且很多时候你觉得你理解了,其实并没有你自认为的那么理解.十月份没怎么写文章,因为国庆出去玩的比较久,心变野了,现在是时 ...
- setTimeout和setInterval的各自使用场景
默认的 setTimeout 只执行一次, 清除用clearTimeout setInterval 每间隔指定的时间, 就执行一次, 清除用clearInterval 但是, setTimeout也可 ...
- 修改setInterval作用域
Hello,今天和大家分享如何修改setInterval作用域. 0.引子 最近在做一个项目的时候需要开发一个图片轮播显示的组件,在实现过程中遇到了关于setInterval作用域的问题. Slide ...
- JavaScript中的该如何[更好的]做动效
在用js写动画的时候,无非使用 setTimeout/setInterval 或者 requestAnimationFrame 来处理动画(在jquery的代码里也是这么干的),本文主要为了记录下两者 ...
- node.js之setTimeout()、clearTimeout()与 setInterval()与clearInterval()
1.setTimeout函数与clearTimeout函数 setTimeout(cb,ms,[arg],[...])延时一定时间执行回调函数该函数中cb参数为必填函数,为需要执行的回调函数ms为经过 ...
随机推荐
- 基于STM32的USB枚举过程学习笔记（转）
之前使用ST官方的库以及网络的资料,完成了使用USB HID类进行STM32和PC机的通讯.由于其他原因并没有深入的分析,虽然实现了功能,但是关于USB设备的枚举,以及具体的通讯方式都没有清晰的概念, ...
- EF Core 相关的千倍性能之差： AutoMapper ProjectTo VS Mapster ProjectToType
在前两天遇到 .NET Core 中 EF Core 的异步与同步查询的百倍性能之差(详情之前的博文)之后,这两天又遇到了 AutoMapper ProjectTo<T> 与 Mapste ...
- 来自一个电子狂的stm32学习历程
文章尾部有学习时的一些视频资料在学的可以看看那么我们就进入今天的主题我stm32的学习历程 在学习了51单片机之后,早已经对单片机这个东西甚有了解了,所有不管是从内部资源,还是一些常见应用,都可以说的 ...
- [Day22]IO(File、递归)
1.File 1.1 IO概述 (1)当需要把内存中的数据存储到持久化设备上的这个动作称为输出(写)Output操作 (2)当把持久设备上的数据读取到内存中的这个动作称为输入(读)Input操作 1. ...
- Web开发（XAMPP服务器搭建）
XAMPP是一个功能强大的搭建服务器环境的软件集成包.它集成了Apache.MySql.php.perl这几个服务器常用的软件.而我们在使用时,省去了安装这些软件的步骤,只需要下载XAMPP,解压缩. ...
- robotframework RF使用中需要安装的工具和库
确保 Python 3.6.2 安装成功 安装 如下 RF使用中需要的工具和库 1. RF 在两个Python中安装 robotframework执行命令 pip install robotframe ...
- EE4218 / EE4216 Faculty of Science and Engineering
Faculty of Science and EngineeringDepartment of Electronic and ComputerEngineeringEnd of Semester As ...
- DAX/PowerBI系列 - 建模视图可以多个分页
PowerBI 十一月的更新终于有了一个解决密集恐惧症患者的方法,建模视图每个tab专注于一个领域,更加简洁. ps: Microstrategy早就有了.
- linux发展
硬件 1946年诞生于宾夕法尼亚州,占地170平米,重量达到30吨,名字叫做ENIAC(electronic numerical integrator and calculator)主要作用是为美国国 ...
- XML CDATA识别“<,>”
http://www.w3school.com.cn/xml/xml_cdata.asp 术语 CDATA 指的是不应由 XML 解析器进行解析的文本数据(Unparsed Character Dat ...