JavaScript 是目前web开发中不可或缺的一项技术。它能够为网页界面带来无限可能，但使用JavaScript时也需要注意执行顺序。JavaScript 异步执行就是其中一个需要注意的问题。
当JavaScript代码执行到需要执行一个异步操作时，比如请求一个服务端接口或者读取本地数据，代码将不会阻塞，而是继续往下执行，等到异步操作完成后，会通知代码执行该操作的回调函数。我们需要管理好这些回调函数的顺序，以保证代码的正确性。
JavaScript 在执行异步操作时有两种方式：callbacks 和 promises/async-await。下面分别介绍它们的执行顺序。
## Callbacks
Callbacks 是一种最基本的异步执行工具，代码通常会包含一个回调函数，该函数会在异步操作完成后执行。比如：
```
console.log('Start');
setTimeout(function () {
console.log('Hello');
}, 1000);
console.log('End');
```
上面代码中，当我们调用`setTimeout()`时，因为设置延时一秒钟后才执行，代码不会停下来等待，而是继续往下执行，输出结果为：
```
Start
End
Hello
```
代码的执行结果是按代码顺序执行的。在执行`setTimeout()`之后，代码不会等待一秒钟，而是立即执行`console.log('End')`，最后在一秒钟后执行`console.log('Hello')`。
## Promises/async-await
Promises/async-await 是一种更加现代的异步执行方式，它可以更好地控制代码执行顺序。使用 Promises/async-await 时，异步操作返回一个 Promise 对象，该对象在操作完成后会返回执行结果。因为 Promise 对象有一个 `.then()` 方法，所以我们可以直接使用 Promise 的链式调用方式来管理回调函数的顺序。比如：
```
console.log('Start');
new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('Hello');
}, 1000);
}).then(function (value) {
console.log(value);
});
console.log('End');
```
上面代码中，我们使用了 Promise 来封装异步操作。当调用`resolve('Hello')`时，代码不会阻塞，而是继续往下执行。
代码的输出结果与 callbacks 相比不同，输出结果为：
```
Start
End
Hello
```
由此可见，使用 Promises/async-await 执行异步操作可以更好地控制代码的执行顺序。
## 总结
JavaScript 异步执行是web开发中必须要掌握的基本技能之一。通过这篇文章的介绍，我们了解了 callbacks 和 Promises/async-await 两种异步执行方式的启发式区别，以及如何使用它们来更好地控制JavaScript代码的执行顺序。
无论是callbacks还是 promises/async-await ，我们都需要根据实际情况制定正确的执行顺序，避免代码中出现错综复杂的回调函数嵌套和调用顺序的混乱。
希望这篇文章可以帮助大家更好地掌握 JavaScript 异步执行的知识，让开发变得更加顺畅和高效。