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为经过 ...
随机推荐
- 数据仓库 - 2.数据仓库设计思路及ETL设计思路
一.数据仓库构建思想 构造数据仓库有两种方式:一是自上而下,一是自下而上. Bill Inmon先生推崇“自上而下”的方式,即一个企业建立唯一的数据中心,就像一个数据的仓库,其中数据是经过整合.经过清 ...
- 模板设计在tomcat中的应用
tomcat是一个常见的web容器,用户使用它可以很方便地管理servlet小程序,而servlet与tomcat的交互代码设计就用到了模板设计. 何谓模板设计,就是定义一个抽象父类,在该父类中组织子 ...
- LeetCode 871 - 最低加油次数 - [贪心+优先队列]
汽车从起点出发驶向目的地,该目的地位于出发位置东面 target 英里处. 沿途有加油站,每个 station[i] 代表一个加油站,它位于出发位置东面 station[i][0] 英里处,并且有 s ...
- Spring Session event事件分析
1. org.apache.catalina.session.StandardSession 这是servlet-api jar包中的一个类.是session接口的标准实现.当session创建的时候 ...
- 虚拟机下hadoop1.1.2安装（单机版）与（集群版）
(1)我的电脑环境 CentOS6.5,64位,在虚拟机下实现. (2)jdk1.6的安装 jdk我用的是1.6.0_27,自己在网上下载jdk-6u27-linux-x64.zip 先在/usr/l ...
- kubernetes in action - Volumes
Volume解决Kubernetes的存储的问题 对于Pod使用的存储,抽象为volume,volume伴随着Pod的创建而创建,消失而同时消失,不能单独的创建 这样的好处,是存储的塑胶不会因为某个c ...
- odoo按钮触发下载文件
测试环境:Odoo8.0 1.在你的模块中创建一个方法,返回url 举个例子, @api.multi def get_stock_file(self): return{'type':'ir.actio ...
- python练习题-day18
1.匹配一行文字中的所有开头的字母内容 import re s="i love you not because of who you are, but because of who i am ...
- 解决页面使用ifrmae后，在session失效后登录页面在子页面中显示（子窗体出现父窗体）
在登录页面中添加js判断当前页面是否是父页面,诺不是则父页面跳转至登录页面. <script type="text/javascript"> //解决登录后多个父窗体问 ...
- web自动化测试python+selenium学习总结----selenium安装、浏览器驱动下载
一.安装selenium 命令安装selenium库 :pip install -U selenium 查看selenium是否安装成功:pip list PS:有时会有异常,安装失败,可以尝试去s ...