setInterval注意事项

2019独角兽企业重金招聘Python工程师标准>>>

1. 想实现每次触发dingshi这个函数时，之前的定时器也被清除，但是下面代码是反面教材，因为再次点击触发dingshi函数时，再次生成定时器，而之前的定时器是一个局部变量，无法在重新执行dingshi函数时清除，因此点击一次按钮就多一个定时器

var a = 0;
function dingshi(){
	if(int){
		clearInterval(int);
	}
	var int = setInterval(function(){
		a++;
		console.log(a);
	},1000);	
}

$("#mybtn").click(function(e){
	dingshi();
});

正确做法如下面代码，将定时器声明为全局变量

var a = 0;
var int;
function dingshi(){
	if(int){
		clearInterval(int);
	}
	int = setInterval(function(){
		a++;
		console.log(a);
	},1000);	
}

$("#mybtn").click(function(e){
	dingshi();
});

2. 定时器里执行的方法里使用return

var a = 0;
var int;
function dingshi(){
	int = setInterval(function(){
		a++;
		if(a == 3){
			return;
		}
		console.log(a);
	},1000);	
}

$("#mybtn").click(function(e){
	dingshi();
});

这个return只是在a==3这个条件时跳出定时器执行的方法，但是没有清除掉定时器，所以定时器仍然循环下去，结果打印出“1,2,4,5。。。”

转载于:https://my.oschina.net/daladida/blog/842943