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为经过 ...
随机推荐
- 干货 | 教你如何监控 Java 线程池运行状态
之前写过一篇 Java 线程池的使用介绍文章<线程池全面解析>,全面介绍了什么是线程池.线程池核心类.线程池工作流程.线程池分类.拒绝策略.及如何提交与关闭线程池等. 但在实际开发过程中, ...
- JAVA RPC (六) 之thrift反序列化RPC消息体
我们来看一下服务端的简单实现,直接上thrift代码,很直观的来看一看thrift的server到底干了些什么 public boolean process(TProtocol in, TProtoc ...
- iview 表单非空验证
rules: { title: [ {required: true, message: '请填写栏目名称', trigger: 'blur'} ], desc: [ {required: true, ...
- 2018年年度总结 & 2019年计划
2018关键词 「探索」 引用以前作文最爱写的开头,时间如白驹过隙,回想上次写17年年度总结,仿佛也就过了几日光景. 首先回顾一下17年定下的目标, 18年我将关键字设为探索,目的有两个,一是 ...
- docker国内镜像源
https://www.daocloud.io/mirror curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http ...
- mysql 状态锁 连接数
show OPEN TABLES where In_use > 0; show status like 'Table%'; SELECT * FROM information_schema.in ...
- 20175211 2018-2019-2 《Java程序设计》第六周学习总结
目录 教材学习内容总结 第七章 内部类与异常类 第十章 输入.输出流 教材学习中的问题和解决过程 代码托管 学习进度条 参考资料 教材学习内容总结 第七章 内部类与异常类 第十章 输入.输出流 教材学 ...
- UML与软件建模：第一次作业（UML用例图绘制）
uml第一次作业: 用例图是什么? 用例图我感觉就是把网站中各个用户的动作分解一下,再用rational rose软件把图画出来. 画例图主要分为三个步骤:a 确定系统角色 b 确定用例 c 对用 ...
- idea没配置Tomcat容器报错及解决方法
servlet报错,提示没有一个容器,需要一个容器来运行,说明没有tomcat容器. 看看idea的配置有没有配置tomcat? 果然没有配置tomcat容器(正常画红框的地方会出现配置的tomcat ...
- Python3.0科学计算学习之绘图（一）
基本绘图: (1) plot是标准的绘图库,调用函数plot(x,y)就可以创建一个带有绘图的图形窗口(其中y是x的函数).输入的参数为具有相同长度的数组(或列表):或者plot(y)是plot(r ...