【知识】定时器setTimeout/setInterval执行时this指针指向问题
【问题描述】
setTimetout/setInterval中this指针指向window,以下是一个小demo:
var demoChange = {
key: true,
changeFun() {
console.log('调用函数');
this.key = true;
},
init() {
setInterval(function () {
if (this.key) { // 此处会报出this.key is undefined 的错误
this.key = false;
this.changeFun();
}
}, 3000);
}
}
demoChange.init();
我想要的是this指定demoChange对象,但是function中的this指向的是window。
【解决方案】
1、保存this变量
var demoChange = {
key: true,
changeFun() {
console.log('调用函数');
this.key = true;
},
init() {
var _this = this; // init()函数由对象调用,因此this指向对象
setInterval(function () {
if (_this.key) { //闭包原理 函数内部找不到_this变量,会向父级作用域找
_this.key = false;
_this.changeFun();
}
}, 3000);
}
}
demoChange.init();
2、改变函数内部this指向:bind
var demoChange = {
key: true,
changeFun() {
console.log('调用函数');
this.key = true;
},
init() {
setInterval(function () {
if (this.key) {
this.key = false;
this.changeFun();
}
}.bind(this), 3000); // bind会将第一个参数替换函数内的this指向,这里不用call/aplly是因为它们会立即执行函数,而bind不会。
}
}
demoChange.init();
3、箭头函数
var demoChange = {
key: true,
changeFun() {
console.log('调用函数');
this.key = true;
},
init() {
setInterval(() => { // 箭头函数内没有this指向问题,this会使用父级作用域中的this
if (this.key) {
this.key = false;
this.changeFun();
}
}, 3000);
}
}
demoChange.init();
【参考文章】https://www.cnblogs.com/zsqos/p/6188835.html
【知识】定时器setTimeout/setInterval执行时this指针指向问题的更多相关文章
- 定时器(setTimeout/setInterval)调用带参函数失效解决方法
也许你曾碰到过这样的问题,不管是setInterval()还是setTimeout(),当code参数里放一个带参函数时,定时器都会失效,看下面这个例子: function test(str){ al ...
- 清除定时器 和 vue 中遇到的定时器setTimeout & setInterval问题
2019-03更新 找到了更简单的方法,以setinterval为例,各位自行参考 mounted() { const that = this const timer = setInterval(fu ...
- Juqery 定时器 settimeout setInterval
setTimeout 只执行一次 setTimeout(loading_tree,2000); function loading_tree(){ $('body').mLoading("hi ...
- JS黑魔法之this, setTimeout/setInterval, arguments
最近发现了JavaScript Garden这个JS黑魔法收集处,不过里面有一些东西并没有说得很透彻,于是边看边查文档or做实验,写了一些笔记,顺手放在博客.等看完了You don't know JS ...
- javascript定时器:setTimeout与setInterval
概述: setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段,只执行一次: setInterval:周期性地调用一个函数(function)或者执行一段代码,重复执行: 语法格式 ...
- 定时器setTimeout()和setInterval()使用心得整理
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. 一.setTimeout() setTimeout函 ...
- 有关定时器setTimeout()、setInterval()详解
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. setTimeout() setTimeout函数用 ...
- JS Window对象 计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码。
计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码. 语法: setInterval(代码,交互时间); 参数说明: 1. 代码:要调用的函数或要执行的代码串. 2. 交互 ...
- js中setTimeout/setInterval定时器用法示例
js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 functio ...
随机推荐
- 去掉有序数组中的重复元素 c/c++
去掉有序数组中的重复元素: int RemoveDuplates(int A[], int nCnt) { ; ; , j = ; i < nCnt && j < nCnt ...
- websocket服务器推送 (node+express+vue+socket)
简介: 此项目需要懂一点node.express 功能: 1.前端用户登录,查看服务端推送的消息,用户只能在一个地方登录,也就是单点登录 2.服务端首先登录,上传需要推送的信息文本,后台读取文本后,存 ...
- Android 透明主题
转至:https://blog.csdn.net/zhangwenchaochao/article/details/78654128 Activity采用透明主题有两种方式: 重要的内容说三遍: 采用 ...
- hive_server2的权限控制
CDH的core-sit开启: 第一个false表示用系统用户来和hive用户的权限绑定,但经测试并没有生效,所以可以改为true 第二项设置成ALL,表示创建者对其创建的表拥有所有的权限,这样也是比 ...
- CentOS7之SVN服务配置
操作系统:CentOS Linux release 7.2.1511 (Core) Subversion软件版本:subversion-1.7.14-10.el7.x86_64 1.首先检查sv ...
- zookeeper集群的搭建(CentOS 7)
注意ip地址为: 虚拟机ip设置 TYPE="Ethernet"BOOTPROTO="static"NAME="enp0s3"DEVICE= ...
- oracle sid_name service_name
在工作中也遇到了这种情况,使用oracle这么长时间一直使用的都是SID的概念.也是给自己扩充了一下知识,所以后面在配置oracle数据库连接的时候需要确认拿到的是service还是sid再进行相应的 ...
- 洛谷 P1578 奶牛浴场 题解
题面 1.定义有效子矩形为内部不包含任何障碍点且边界与坐标轴平行的子矩形.如图所示,第一个是有效子矩形(尽管边界上有障碍点),第二个不是有效子矩形(因为内部含有障碍点). 2.极大有效子矩形:一个有效 ...
- zuul开发实战(限流,超时解决)
什么是网关 API Gateway,是系统的唯一对外的入口,介于客户端和服务器端之间的中间层,处理非业务功能 提供路由请求.鉴权.监控.缓存.限流等功能 统一接入 * 智能路由 * AB测试.灰度测试 ...
- java springmvc poi 导出Excel,先简单记录,后期会详细描写
POI jar包下载 : http://poi.apache.org/download.html jsp代码 <%@ page language="java" content ...