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为经过 ...
随机推荐
- BAT加密最终版
%%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a ...
- Kruskal || BZOJ 1601: [Usaco2008 Oct]灌水 || Luogu P1550 [USACO08OCT]打井Watering Hole
题面:P1550 [USACO08OCT]打井Watering Hole 题解:无 代码: #include<cstdio> #include<cstring> #includ ...
- PHP算法学习（6） 单向链表 实现栈
svn地址:svn://gitee.com/zxadmin/live_z 这个是模拟栈的先进后出的一个链表操作,自动维护链表,当然你也使用SPL的栈 测试版本php 5.4 ,5.6,7.0,7.2 ...
- Netty入门（一）：零基础“HelloWorld”详细图文步骤
因为接下来的项目要用到netty,所以就了解一下这个程序,奈何网上的教程都是稍微有点基础的,所以,就写一篇对于netty零基础的,顺便也记录一下. 先扔几个参考学习的网页: netty 官方API: ...
- 现代IM系统中消息推送和存储架构的实现
现代IM系统中消息推送和存储架构的实现-云栖社区-阿里云 https://yq.aliyun.com/articles/253242
- flutter学习之二Material Design设计规范
前言: 最近在自学flutter跨平台开发,从学习的过程来看真心感觉不是那么一件特别容易的事.不但要了解语法规则, 还要知晓常用控件,和一些扩展性的外延知识,所以套一句古人的话“路漫漫其修远矣,无将上 ...
- python基础1 print（）函数
一切程序的开始都是由print('hello world') 了解print()函数 输出python之歌 print(''' 优美胜于丑陋明了胜于晦涩简洁胜于复杂复杂胜于凌乱扁平胜于嵌套间隔胜于紧凑 ...
- python中字符串的拼接
1.+ 号 2.format() 3.f"{username}登录成功" 4.%s 5.列表中的 join 6.逗号 http://www.cnblogs.com/gengcx/p ...
- C#基础加强(7)之ref与out
介绍 给方法传递普通参数时,值类型传递的是拷贝的对象,而引用类型传递的是对象的引用.它们都不能在函数内部直接修改外部变量的引用(不是修改引用类型的属性),而使用 ref 或 out 关键字就可以实现. ...
- PowerBI更新2019/04 - 解决方案架构 - PowerBI Solution Architecture（一图胜万字！）
Power BI 架构图 (2019/04) 1) Power BI Desktop 是一个免费的工具.它可以用来准备和管理数据模型:包括链接各种数据:做数据清洗:定义关系:定义度量值和层级关系:应用 ...