面试题:1到10 ,每隔一秒输出一个
自执行函数
for (var i=1; i<=10; i++) {
(function (i) {
setTimeout(() => console.log(i), 1000*i)
})(i)
}
复制代码
块级作用域
for (let i=1; i<=10; i++) {
(function () {
setTimeout(() => console.log(i), 1000*i)
})()
}
复制代码
其实面试官是想问js的同步编程以及异步编程
JS中的同步编程和异步编程
JS是单线程的(一个任务只能执行一次,当前任务没有完成,下面的任务是不会进行处理的)
同步编程(sync:synchronize):任务是按照一件件的完成的,当前任务没有完成,下面的任务不进行处理
异步编程(async::当前任务在等待执行的时候,我们不去执行,继续完成下面的任务,当下面的任务完成后,而是也到达等待的时间了,采取执行当前的任务
异步编程
> 定时器是异步编程的
> 所有的事件绑定也是异步编程
> AJAX中有异步编程
> 有些人把回调函数当做异步编程(理解起来比较牵强)
> 其余的都是同步编程
复制代码
同步编程个异步编程的核心原理
1、JS 中有两个任务队列(存放任务列表的空间就是任务队列)
1)主任务队列:同步执行任务(从上到下依次执行)
2)等待任务队列:异步执行任务
setTimeout(function () {
console.log(1);
}, 50);
setTimeout(function () {
console.log(2);
}, 10);
setTimeout(function () {
console.log(3);
}, 30);
for (var i = 0; i < 100000000; i++) {
//=>需要600MS~700MS
}
console.log(4);
//输出4,2,3,1,先执行循环,因为定时器异步编程,先放到等待队列,然后浏览器取执行循环,执行完事再去执行定时器,按照时间先后顺序执行
复制代码
for (var i = 1; i <= 5; i++) {
setTimeout(function () {
console.log(i);//输出5次6
}, (5 - i) * 10);
}
//=>[主任务队列]
// i=1 创建一个定时器
// i=2 创建一个定时器
// i=3 创建一个定时器
// i=4 创建一个定时器
// i=5 创建一个定时器
// i=6 循环结束,此时主任务队列中的方法都已经执行完成了,到等待任务队列中找先到时间的方法,拿到主任务队列中执行
// 执行它 function () {console.log(i);},i不是自己私有的,找全局下的i(此时的i已经是6了)
//=>[等待任务队列]
// 40MS后执行某方法
// 30MS后执行某方法
// 20MS后执行某方法
// 10MS后执行某方法
// 0MS后执行某方法
复制代码
for (var i = 0; i <oList.length; i++) {
oList[i].onclick=function () {
alert(i);
}
}
for (var i = 1; i <= 5; i++) {
~function (i) {
setTimeout(function () {
console.log(i);
}, (5 - i) * 10);
}(i);
}
复制代码
for ( i = 1; i <= 5; i++) {
~function(i){ setTimeout(function () {
console.log(i);//依次输出5,4,3,2,1
}, (5 - i) * 10);}(i)
}
复制代码