js循环打印出0~9,我们第一时间想到的就是for循环。
方法一:最简单的方法就是for循环直接打印:
for (var i = 0; i < 10; i++) {
console.log(i);
}
结果:
下面早看这样一段代码:
for (var i = 0; i < 10; i++) {
setTimeout(() => {
console.log(i);
}, 100 * i);
}
大家想下,打印的结果是什么?
结果:
为什么不是我们想象的打印10个数呢???
原因:我们都知道,js有两种类型的回调函数:
同步回调:立即执行,完全执行了才结束,不会放到js的回调队列里。
例子:数组遍历相关的回调函数 / promise的excutor函数
异步回调:不会立即执行,会放到回调队列中将来执行。
例子:定时器回调 / ajax回调 / promise的成功或失败的回调
上述方法,setTimeout在若干秒后执行一个函数,他是要在for循环之后的,而for循环执行后i的值为10,所以当setTimeout中的回调函数执行时,i的值为10,所以打印10次10。
方法二:那我们如何在不修改for循环的前提下,实现我们期待的结果呢?立即执行函数
for (var i = 0; i < 10; i++) {
(function(i) {
setTimeout(() => {
console.log(i);
}, 100 * i);
})(i)
}
结果:
方法三:let声明:
for (let i = 0; i < 10; i++) {
setTimeout(() => {
console.log(i);
}, 100 * i);
}
结果: