文档章节

关于setInterval与setTimeout作用域问题

会写代码的husky
 会写代码的husky
发布于 2017/10/20 10:17
字数 766
阅读 2.1K
收藏 8

精选30+云产品,助力企业轻松上云!>>>

        最近在模仿swiper鼓捣一个轮播图插件时,碰到了setInterval的作用域问题,轮播的方法写在一个对象里,但是setInterval执行这个方法后,在方法体内无法访问这个对象的属性了,业务逻辑代码如下:

function Swiper(num,loopTime) {
	this.num = num;				// 轮播起始位置
	this.loopTime = loopTime;   // 轮播间歇时间
	this.timer = null;			// 保存setInterval定时器对象Id
	this.autoPlay();
}
Swiper.prototype.autoPlay = function() {
	clearInterval(this.timer);
	// 将循环方法Loop传进setInterval执行
	this.timer = setInterval(this.loop,this.loopTime);
}
Swiper.prototype.loop = function() {
	// 循环主逻辑
	console.log('num',this.num);
	this.num++;
}

var swiper = new Swiper(0,1000);

        以上代码并没有按照预期情况(循环递增num)来执行,执行结果为:

      

      分析结果后,发现loop方法体内的this并不是指向new出来的swiper对象,而是window对象,window中没有num,即为undefined,自增后,为NaN。

一、分析

setInterval(this.loop,this.loopTime)

        setInterval是window对象的方法,在setInterval中传入this.loop方法,其实是将其作为匿名函数传入,this.loop的方法体其实是在window对象上执行的,等效为:

setInterval(function() {
	// 循环主逻辑
	console.log('num',this.num);
	this.num++;
}, this.loopTime);

        这样就一目了然,匿名函数里的this自然是指向window,不在指向swiper对象了。

        要改变函数作用域,一般会用apply/call,我尝试用这两个方法去改变this.loop方法体内的作用域

setInterval(this.loop.apply(this),this.loopTime);
setInterval(this.loop.call(this),this.loopTime);

        但结果都为:

        

        而且只执行了一次,为什么只执行了一次呢?我将Loop方法提出来,放在全局让window调用:

var num = 0;
function loop() {
	console.log(num);
	num++;
}
setInterval(loop.apply(window),1000);
setInterval(loop.call(window),1000);

        结果都只执行了一次,原来apply和call方法在window的setIntaval只会执行一次,那样这两个方法就没法满足业务逻辑了。

二、解决方法

        1. 闭包

        这是最常用最简单的方法:

Swiper.prototype.autoPlay = function() {
	clearInterval(this.timer);
	var self = this;	// 将this对象保存在self中
	this.timer = setInterval(function(){
		self.loop();	// 在匿名函数中使用保存后的self对象,其指向swiper对象
	},this.loopTime);
}

        运行结果符合预期:num 间歇自增

        

        2. ECMAscript 5 中 Function.prototype.bind 方法

        这个方法会将函数的this值绑定到传递给bind方法的参数上,并返回一个新的函数实例:

window.num = 1;

var obj = { num: 2};
function alertNum() {
	alert(this.num);
}

alertNum();		// 1;

var newAlertNum = alertNum.bind(obj);

newAlertNum();	// 2

        通过bind方法来修改setInterval调用:

Swiper.prototype.autoPlay = function() {
	clearInterval(this.timer);
	// 将loop方法bind到swiper对象上
	this.timer = setInterval(this.loop.bind(this),this.loopTime);
}

        同样符合预期:

        

 

三、setTimeout

        setTimeout也可以用来做循环调用,而且不必担心像setInterval那样存在计时器堆叠问题,比setInterval有优势(不必像setInterval那样,调用之前都要用clearInterval清除一下缓存的计时器),但它同样属于window对象,存在调用时的作用域问题:

var obj = {
	num: 0,
	loop: function() {
		console.log(this.num);
		this.num++;
		setTimeout(this.loop,1000);  // this.num 为undefined
	}
};
obj.loop();

        延迟1s后调用发现this.num就为undefined,解决方法与setInterval一样:使用bind或者闭包

loop: function() {
		this.num++;
		setTimeout(this.loop.bind(this),1000);
	}


loop: function() {
		var self = this;
		this.num++;
		setTimeout(function() {
			self.loop();
		},1000);
	}

 

下一篇: BFC浅析
会写代码的husky
粉丝 6
博文 23
码字总数 17052
作品 0
北京
程序员
私信 提问
加载中
请先登录后再评论。
关于setInterval与setTimeout作用域问题

最近在模仿swiper鼓捣一个轮播图插件时,碰到了setInterval的作用域问题,轮播的方法写在一个对象里,但是setInterval执行这个方法后,在方法体内无法访问这个对象的属性了,业务逻辑代码如下...

爱coding的husky
2017/11/03
0
0
setTimeout与setInterval

前言:关于最近面试遇到的setTimeout与setInterval相关面试题,网上搜索相关资料,进行学习总结。 1、setTimeout与setInterval的区别? setTimeout()方法用来指定某个函数或字符串在指定的毫...

osc_n1z6bj15
2019/02/28
2
0
关于setInterval和setTImeout中的this指向问题

问题描述 前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例: var num = 0;function Obj (){ }var obj = ne...

osc_cj3zzdzw
05/29
10
0
关于setInterval和setTImeout中的this指向问题

问题描述 前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例: var num = 0;function Obj (){ }var obj = ne...

陌路黄昏后
2016/12/16
0
0
循环中的异步&&循环中的闭包

在这之前先要了解一下 for循环中let 和var的区别 var 是函数级作用域或者全局作用域,let是块级作用域 看一个例子 foo函数下的index输出5,全局下的index不存在 现在我们把var 换为let 报错了...

陌上寒
2019/03/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

为什么JavaScript仅在IE中打开开发人员工具一次后才能工作?

问题: IE9 Bug - JavaScript only works after opening developer tools once. IE9错误-JavaScript仅在打开开发人员工具一次后才能工作。 Our site offers free pdf downloads to users, a......

javail
16分钟前
10
0
动态规划:LC198.打家劫舍

题目描述: 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入...

曦鱼violet
28分钟前
30
0
OSChina 周一乱弹 —— 南方水到底多深

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: Various Artists-用印度乐器演奏苏联国歌(洛天侬 remix) 手机党少年们想听歌,请...

小小编辑
54分钟前
56
0
快递100云平台的安全措施--API限流

2、热点参数限流 注意: 若 entry 的时候传入了热点参数,那么 exit 的时候也一定要带上对应的参数(exit(count, args)),否则可能会有统计错误。 3、通过 ParamFlowRuleManager 的 loadRu...

bykk
今天
19
0
在Bash中重定向stderr和stdout - Redirect stderr and stdout in Bash

问题: I want to redirect both stdout and stderr of a process to a single file. 我想将一个进程的stdout和stderr都重定向到一个文件。 How do I do that in Bash? 我该如何在Bash中做到...

富含淀粉
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部