js之中的异步
异步
1.知道哪部分代码是异步的;
2.必须要知道异步程序之中的数据或者赋值的变量在哪里可用;
js:单线程语言
- 上面一行代码不执行结束,下面一行代码不会执行;
单线程
多线程
- js中存在很大需要长时间等待才会执行的代码;
异步:在js中需要消耗大量时间等待某些程序执行的时候,会让正常程序继续执行.耗时较长的程序等会执行.耗时较长的程序我们把它称之为异步程序;
js设定的异步:
- 事件;
- 定时器;
- 所有的ajax请求
- promise
异步程序是等到所有同步程序执行结束才会去执行的代码;
- 事件有事件处理函数(回调函数)
- 定时器有回调函数
- ajax请求也有回调函数
- promise...
异步程序的第二个特征就是必须有个回调函数
- 回调函数: 同步程序执行结束之后,回头调用的函数;
异步的执行顺序; Event Loop;
异步实战😗*
如果把script标签放在head中,即body之上,如果不使用异步程序的回调函数包裹,打印出来的lis.length为0,放在异步程序之中,则会放在所有代码之后执行,即可获得最终的lis.length!
<script>
// 异步程序之中的代码,会在当前所有代码之后执行;
// setTimeout(function(){
// // 放在了最上面;
// var lis = document.getElementsByTagName("li");
// console.log(lis.length);
// },0)
window.onload = function(){
var lis = document.getElementsByTagName("li");
console.log(lis.length);
}
</script>
<body>
<ul>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ul>
</body>
面试题中的异步
根据异步的原理,定时器里的回调函数在for循环结束之后调用,所以无论定时器的时间间隔是多少,最后打印的结果都是10;
for(var i = 0; i <= 10 ; i ++ ){
setTimeout(function(){
console.log(i);//10
},0)
}