134 - 异步编程基础 - 同步与异步 - 异步操作的特点

异步编程基础 - 同步与异步 - 异步操作的特点

在前端开发的世界里，Javascript 是一门至关重要的编程语言。而在其编程体系中，异步编程是一个核心且关键的概念。要理解异步编程，我们首先得搞清楚同步与异步的区别，以及异步操作所具备的特点。

同步与异步的基本概念

同步操作

同步操作就像是我们去银行办理业务，需要在一个窗口排着队，一个业务办理完之后才能办理下一个业务。在代码层面，同步操作会按照代码的书写顺序依次执行，只有当前操作完成后，才会执行下一个操作。

以下是一个简单的同步操作示例：

function syncFunction() {
    console.log('开始执行同步操作');
    // 模拟一个耗时操作
    for (let i = 0; i < 1000000000; i++) {}
    console.log('同步操作执行完毕');
}
console.log('调用同步函数前');
syncFunction();
console.log('调用同步函数后');

在这个例子中，syncFunction 里的耗时操作会阻塞后续代码的执行，直到该操作完成，才会继续执行 console.log('调用同步函数后')。

异步操作

异步操作则类似于我们在餐厅点餐，我们下单之后，不用一直等着餐做好，而是可以去做其他事情，比如看看手机、和朋友聊天，等餐做好了服务员会通知我们。在代码中，异步操作不会阻塞后续代码的执行，当遇到异步操作时，程序会继续执行后面的代码，等到异步操作完成后，再通过某种方式（如回调函数、Promise 等）通知我们。

下面是一个简单的异步操作示例，使用 setTimeout 函数：

function asyncFunction() {
    console.log('开始执行异步操作');
    setTimeout(() => {
        console.log('异步操作执行完毕');
    }, 2000);
}
console.log('调用异步函数前');
asyncFunction();
console.log('调用异步函数后');

在这个例子中，setTimeout 是一个异步操作，当执行到 setTimeout 时，程序不会等待 2 秒，而是会继续执行 console.log('调用异步函数后')，2 秒后，回调函数里的代码才会执行。

异步操作的特点

非阻塞性

这是异步操作最显著的特点。如上面的 setTimeout 示例所示，异步操作不会阻塞主线程的执行，从而可以让程序同时处理多个任务，提高了程序的性能和响应能力。在前端开发中，很多操作都是耗时的，比如网络请求、文件读取等，如果使用同步操作，页面会出现卡顿现象，用户体验会很差。而使用异步操作，页面可以在等待这些操作完成的同时，继续响应用户的其他操作。

回调机制

异步操作通常会使用回调函数来处理操作完成后的结果。回调函数是一个作为参数传递给异步函数的函数，当异步操作完成后，会调用这个回调函数。例如，在使用 XMLHttpRequest 进行网络请求时：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log('请求成功，响应数据：', xhr.responseText);
    }
};
xhr.send();

在这个例子中，onreadystatechange 就是一个回调函数，当请求状态发生变化时，会调用这个函数来处理响应结果。

事件驱动

异步操作常常基于事件驱动的模型。在浏览器环境中，很多异步操作都是通过事件来触发和处理的，比如点击事件、鼠标移动事件等。例如：

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    console.log('按钮被点击了');
});

在这个例子中，当用户点击按钮时，会触发 click 事件，然后执行相应的回调函数。

执行顺序不确定

由于异步操作不会阻塞主线程，其执行顺序可能与代码的书写顺序不一致。例如：

console.log('代码开始');
setTimeout(() => {
    console.log('第一个 setTimeout');
}, 1000);
setTimeout(() => {
    console.log('第二个 setTimeout');
}, 500);
console.log('代码结束');

这段代码的输出顺序可能是：

代码开始
代码结束
第二个 setTimeout
第一个 setTimeout

这是因为 setTimeout 是异步操作，程序会先执行同步代码，然后再根据定时器的时间依次执行异步操作。

总结

理解同步与异步的区别以及异步操作的特点，对于掌握 Javascript 的异步编程至关重要。在实际开发中，我们需要根据具体的需求选择合适的编程方式，以提高程序的性能和用户体验。