2019-05-14 异步

同步：等待结果
异步：不等待结果
// 同步的 sleep
function sleep(seconds){
var start = new Date()
while(new Date() - start < seconds * 1000){
}
return
}
console.log(1)
sleep(3)
console.log('wake up')
console.log(2)

image.png

打开控制台查看代码执行性能的步骤

//异步的 sleep
function sleep(seconds, fn){
setTimeout(fn, seconds * 1000)
}
console.log(1)
sleep(3, ()=> console.log('wake up'))
console.log(2)
结果：
1
2
wake up

可以看出，用了异步之后，JS 的空闲时间，多了许多。
但是注意，在 JS 空闲的这段时间，实际上是浏览器中的计时器在工作（很有可能是每过一段时间检查是否时间到了，具体要看 Chrome 代码）

异步题
document.getElementsByTagNames('img')[0].width // 宽度为 0
console.log('done')

document.getElementsByTagNames('img')[0].width是同步代码，第一次为什么获取到的宽度是0？
原因：因为没有去等异步结果，图片在页面中是需要时间去下载的 img标签是会发请求的
document.getElementsByTagNames('img')[0].onload = function(){
console.log(this.width) // 宽度不为 0
console.log('real done')
}
console.log('done')

题2：
let liList = document.querySelectorAll('li')
for(var i=0; i<liList.length; i++){
liList[i].onclick = function(){
console.log(i)
}
}
结果//点击任何一个都是6
var会变量提升
let liList = document.querySelectorAll('li')
var i
for(i=0; i<liList.length; i++){
liList[i].onclick = function(){
console.log(i)
}
}
onclick是异步的
解决：将var改为let
这里每次的i是不一样的，是个新的i

题3：

image.png

自己定义网络

image.png
image.png

如何拿到异步结果
一般有两种方式拿到异步结果
傻逼方法：轮训
正规方法：回调