用setTimeout实现for循环中的计时器

Posted on

00x0 写在前面

  要实现的功能：在for循环中写一个计时器，先隔2000毫秒打印1，再隔2000毫秒打印2….依次每间隔2000毫秒打印出0到9.

00x1 基本思路

  要实现分别输出数组中的所有值，通过简单的for循环就能实现。要实现间隔一段时间输出，则使用setTimeout函数。

1
2
3
4
5
6
7
8
function test(){
	for (var i = 0; i < 10; i++) {
	// setTimeout(function(){
		console.log(i);//分别输出i的值
	// },2000)			
	}	
};
test();

  可以在控制台看到紧跟着分别输出了小于10的i的值。但是加上setTimeout函数后，控制台的内容却都变成了10。
  解释造成这种差别的原因，我们要从JavaScript的执行机制开始说起。

00x2 js执行机制与作用域链

  首先，JavaScript是单线程环境，代码从上到下依次执行。这种执行方这也被称作是“同步执行”。（同一时间JavaScript只能执行一段代码，如果这段代码要执行很长时间，那么之后的代码只能尽情地等待它执行完才能有机会执行）。
  但JavaScript中引进了异步机制。于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入”任务队列”（task queue）的任务，只有主线程上的任务执行完了，才通知”任务队列”，任务队列中的任务才会进入主线程执行。

  在上面的代码中，for循环是同步代码，setTimeout是异步代码。遇到这种既包含同步又包含异步的情况，JavaScript依旧按照从上到下的顺序执行同步代码，并将异步代码插入任务队列。setTimeout的第二个参数则是把执行代码（console.log(i)）添加到任务队列需等待的毫秒数，但等待的时间是相对主程序完毕的时间计算的，也就是说，在执行到setTimeout函数时会等待一段时间，再将当前任务插入任务队列。
  最后，当执行完同步代码，js引擎就会去执行任务队列中的异步代码。这时候任务队列中就会有十个console.log(i)。我们知道，在每次循环中将setTimeout里面的代码“console.log(i)”放入任务队列时，i的值都是不一样的。但JavaScript引擎开始执行任务队列中的代码时，会开始在当前的作用域中开始找变量i，但是当前作用域中并没有对变量i进行定义。这个时候就会在创造该函数的作用域中寻找i。创建该函数的作用域就是全局作用域，这个时候就找到了for循环中的变量i，这时的i是全局变量，并且值已经确定：10。十个console.log“共享”i的值。这就是作用域链的问题。
  为了解决以上两个问题，可以使用let或者闭包或者箭头函数。

00x3 解决方案一——闭包

  终于来到了本文中最重要的一部分。什么是闭包？！
  闭包是指有权访问另一个函数作用域中的变量的函数。或者说，将函数作为参数或者返回值。创建闭包的常见方式，就是在一个函数内部创建另一个函数。以下面的代码为例。

1
2
3
4
5
6
7
8
9
10
11
function test(){
    for (var i = 0; i < 10; i++) {
    	(function(j){//闭包
    		setTimeout(function(){
    			console.log(j);//分别输出i的值
    		},4000)		
    	})(i);//闭包
    };	
};
test();

  代码中注释为“闭包”的两行代码就是一个典型的闭包。我们在函数内部创建了一个函数，并将变量i以函数参数形式传递给内层函数中变量j，j就是这个函数中的局部变量，每次i传入的值不同，局部变量j的值也不同。

00x4 解决方案二——let

  如下面的代码所示，使用let替换var，也能输出0-9的值。这是因为，当for循环中的i是通过var定义的变量时，作用域是一整个封闭函数，是全局作用域；当i是通过let定义的变量时，作用域在代码块中，叫做块级作用域，在for循环这个子块中。

1
2
3
4
5
6
7
8
function test(){
	for (let i = 0; i < 10; i++) {
		setTimeout(function(){
			console.log(i);//分别输出i的值
		},2000)		
	};
};
test();

00x5 解决方案三——箭头函数

  如下面的代码所示，使用let替换var，也能输出0-9的值。这是因为，当for循环中的i是通过var定义的变量时，作用域是一整个封闭函数，是全局作用域；当i是通过let定义的变量时，作用域在代码块中，叫做块级作用域，在for循环这个子块中。

1
2
3
4
5
6
7
8
function test(){
	for (let i = 0; i < 10; i++) {
		setTimeout(() => {
			console.log(i);//分别输出i的值
		},2000)		
	};
};
test();

00x5 间隔输出

  在实际查看时，控制台并不是一开始就输出i的值，但是也并没有按照预期每隔一段时间输出i的值，问题就出现setTimeout等待的时间上，每次都是2000ms。在任务队列里，setTimeout按照异步的顺序执行，按照放入任务队列的顺序依次开始执行，所以几乎同时打印出值。也就是说，在异步的情况下，执行任务队列里的代码(console.log(i))按照先后顺序执行，没有明显的时间差。可以利用传入的i的值来设置这种时间差。

1
2
3
4
5
6
7
8
9
10
function test(){
	for (var i = 0; i < 10; i++) {
		(function(j){//闭包
			setTimeout(function(){
				console.log(j);//分别输出i的值
			},2000*j)		
		})(i);//闭包
	};
};
test();

  这样等待的时间就会分别变成20001,20002,2000*3……且传入i的值就立即执行，所以每次打印都会有2000ms的时间差。

Miss Me wechat
light