- 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)