[js] 循环中的异步

初始循环

	for (var i = 0; i < 5; i++) {
	  console.log(i);
	}

    //0         
    //1    
    //2
    //3
    //4


//加入延时

	for (var i = 0; i < 5; i++) {
	  setTimeout(function() {
		console.log(i);
	  }, 1000 * i);
	}

	//5             //立即执行
	//5             //一秒后
	//5             //一秒后
	//5             //一秒后
	//5             //一秒后

过去的写法

    var output = function (i) {
        setTimeout(function () {
            console.log(i);
        }, 1000 * i);
    }
    for (var i = 0; i < 5; i++) {
        output(i);
    }
	
	//0             //立即执行
	//1             //一秒后
	//2             //一秒后
	//3             //一秒后
	//4             //一秒后

let

    for (let i = 0; i < 5; i++) {
        setTimeout(function() {
            console.log(i);
        }, 1000 * i);
    }
	
	//0             //立即执行
	//1             //一秒后
	//2             //一秒后
	//3             //一秒后
	//4             //一秒后

用闭包修改

	for (var i = 0; i < 5; i++) {
	  (function(i) {
		setTimeout(function() {
		  console.log(i);
		}, i * 1000);
	  })(i);
	}
	
	//0             //立即执行
	//1             //一秒后
	//2             //一秒后
	//3             //一秒后
	//4             //一秒后

setTimeout的一种独特用法

    for (let i = 0; i < 5; i++) {
        setTimeout(function (i) {
            console.log(i);
        }, 1000 * i, i);
    }
	
	//0             //立即执行
	//1             //一秒后
	//2             //一秒后
	//3             //一秒后
	//4             //一秒后

闭包未传值

	for (var i = 0; i < 5; i++) {
	  (function() {
		setTimeout(function() {
		  console.log(i);
		}, i * 1000);
	  })(i);
	}

	//5             //立即执行
	//5             //一秒后
	//5             //一秒后
	//5             //一秒后
	//5             //一秒后

setTimeout的错误用法

for (var i = 0; i < 5; i++) {
  setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}

    //0         
    //1    
    //2
    //3
    //4

Promise 与 setTimeout的回调优先级

	setTimeout(function() {
	  console.log(1)
	}, 0);
	new Promise(function executor(resolve) {
	  console.log(2);
	  for( var i=0 ; i<10000 ; i++ ) {
		i == 9999 && resolve();
	  }
	  console.log(3);
	}).then(function() {
	  console.log(4);
	});
	console.log(5);

	//Promise.then()里面的回调属于 microtask, 会在当前 Event Loop 的最后执行, 
	//而 SetTimeout 内的回调属于 macrotask, 会在下一个 Event Loop 中执行
	//2
	//3
	//5
	//4
	//1

async/await

    async function xx() {
        console.time();
        for (let i = 0; i < 5; i++) {
            await new Promise((resolve) => {
                setTimeout(() => {
                    console.log(i)
                    resolve();
                }, 1000)
            })
        }
        console.log('continue')
        console.timeEnd();//default: 5006.636ms
    }
    xx();
	
    //0             //一秒后
    //1             //一秒后
    //2             //一秒后
    //3             //一秒后
    //4             //一秒后
    //continue	    //async结束后才立即显示
	

//koa2 的 delay
	async function delay(time) {
	  return new Promise(function(resolve, reject) {
		setTimeout(function(){
		  resolve();
		}, time);
	  });
	};
	await delay(2000);