- Objective:
- Breadcrumb:
# 概念阐释
多线程同时完成任务叫做异步编程。在网站开发中经常使用的是异步编程,因为同步编程(需要等待一个命令执行完再执行下一个)会带来非常不好的用户体验。
JavaScript虽然是单线程语言,会导致代码阻塞,但是像 **[[js 异步 事件循环]]** 可以使JavaScript完成多线程任务。
# 实例
#### 现实生活中的类比
假如我们要做一个蛋糕,等待烤箱预热与准备材料这两个步骤可以**同时进行**(相当于多[[js介绍 线程|线程]],所以叫做异步);
## 由异步编程完成的实例
### [[js Events 事件监听添加 addEventListener]]
```js
easterEgg.addEventListener('click', () => {
console.log('Up, Up, Down, Down, Left, Right, Left, Right, B, A');
});
```
easterEgg不会按照代码顺序执行,只会在被**点击**后才会执行。
### setTimeout
```js
setTimeout(() => {
console.log('Delay the printing of this string, please.');
}, 1000);
console.log('Doing important stuff.');
console.log('Still doing important stuff.');
//输出
//'Doing important stuff.'
//'Still doing important stuff.'
//'Delay the printing of this string, please.'
```
限定一个延迟100ms之后再输出结果,代码顺序与输出顺序不一样。
### setInterval
```js
console.log("开始");
setInterval(function() {
console.log("定时器执行");
}, 1000);
console.log("结束");
//输出
/*
开始
结束
定时器执行
定时器执行 ...(每秒一次)
*/
```
设定一个定时器,循环执行代码。
# 相关内容
#### 同步编程
在JavaScript中,同步编程会让页面重载很慢,因为代码是从上到下一行一行按照顺序执行,这叫做**代码阻塞**,更加高效的方法是使用异步编程。
# 参考资料
- [异步JavaScript](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous)