题1:输出0,1,2,3,4
解法1:IIFE立即执行函数加形成闭包
for(var i=0;i<5;i++){
(function (i) {
setTimeout(function () {
console.log(i) // 0,1,2,3,4
}, 1000)
})(i)
}
解法2:利用JS的基本类型中参数传递是按值传递的特征
var output = function (i) {
setTimeout(function () {
console.log(i) // 0,1,2,3,4
}, 1000)
};
for (var i = 0; i < 5; i++) {
output(i)
}
解法3:利用ES6的let块级作用域
for(let i=0;i<5;i++){
setTimeout(function () {
console.log(i)
}, 1000)
}
题2:输出0,1,2,3,4,5 要求立即输出0,后每隔一秒输出后面的数字
解法1:利用ES6的新特性Promise
const tasks = [];
for(var i=0;i<5;i++){
((j) => {
tasks.push(new Promise((resolve) => {
setTimeout(function () {
console.log(j) //
resolve()
}, 1000*j) //定时器的时间逐步增加
}))
})(i)
}
Promise.all(tasks).then(() => {
setTimeout(function(){
console.log(i)
},1000)
})
解法2:利用ES6的新特性Promise
const tasks = []; //存放异步操作的Promise
const output = (i) => new Promise((resolve) => {
setTimeout(function(){
console.log(i) //0,1,2,3,4
resolve()
},1000*i)
})
//生成全部的异步操作
for(var i=0;i<5;i++){
tasks.push(output(i))
}
//异步操作完成后,输出最后的i的值
Promise.all(tasks).then(() => {
setTimeout(function(){
console.log(i) //5
},1000)
})
解法3:利用ES7中的async、await
const sleep = (times) => new Promise((resolve) => {
setTimeout(resolve, times)
})
(async () => { //声明即执行的async 函数表达式
for(var i = 0;i<5;i++){
await sleep(1000);
console.log(i)
}
await sleep(1000);
console.log(i)
})()