H41-会动的简历

Posted on | In

页面会动的原理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// html
<head>
  ...
  <style id='styleTag'></style>
</head>
<body>
<pre id='code'></pre>
</body>

// js
var str = `
body {
  transition: all 1s;
  background: #f60;
}
`
var n = 0
var id = setInterval(()=>{
  code.innerHTML = str.slice(0,n)
  styleTag.innerHTML = str.slice(0,n)
  if(n >= str.length){
    window.clearInterval(id)
  }
  n++
  console.log(n)
},100)

最终代码
预览

异步

不等结果直接进行下一步
怎么拿到结果？
使用回调
什么是回调？
a: 让黄牛去买票，然后站着等（同步）
b: 让黄牛去买票(让黄牛买到票call我)，然后去做别的
b括号里面的部分就是回调
回调是拿到异步结果的一种方式
回调也可以拿同步结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function 异步做事(){
  setTimeout(function(){
  console.log('异步做事')
},1000)
}
function 同步做事(){
  console.log('同步做事')
}
异步做事()
console.log(1) // 不等上面结果
// 由于异步做事，不等结果，所以会先打印1

同步做事()
console.log(1) // 等上面结果
// 由于同步做事等结果，所以要等做完事，再打印1

知乎

老张爱喝茶，废话不说，煮开水。出场人物：老张，水壶两把（普通水壶，简称水壶；会响的水壶，简称响水壶）。1 老张把水壶放到火上，立等水开。（同步阻塞）老张觉得自己有点傻2 老张把水壶放到火上，去客厅看电视，时不时去厨房看看水开没有。（同步非阻塞）老张还是觉得自己有点傻，于是变高端了，买了把会响笛的那种水壶。水开之后，能大声发出嘀~~~~的噪音。3 老张把响水壶放到火上，立等水开。（异步阻塞）老张觉得这样傻等意义不大4 老张把响水壶放到火上，去客厅看电视，水壶响之前不再去看它了，响了再去拿壶。（异步非阻塞）老张觉得自己聪明了。所谓同步异步，只是对于水壶而言。普通水壶，同步；响水壶，异步。虽然都能干活，但响水壶可以在自己完工之后，提示老张水开了。这是普通水壶所不能及的。同步只能让调用者去轮询自己（情况2中），造成老张效率的低下。所谓阻塞非阻塞，仅仅对于老张而言。立等的老张，阻塞；看电视的老张，非阻塞。情况1和情况3中老张就是阻塞的，媳妇喊他都不知道。虽然3中响水壶是异步的，可对于立等的老张没有太大的意义。所以一般异步是配合非阻塞使用的，这样才能发挥异步的效用。——来源网络，作者不明。

阮一峰-JS异步编程的四种方法

#