面试题：JavaScript中异步与同步在函数执行上的区别

Question

请阐述JavaScript中同步函数和异步函数在执行流程上有何不同？并举例说明如何使用回调函数实现简单的异步操作。

Answer 1

同步函数和异步函数执行流程的不同

1. 同步函数：
   • 同步函数按照顺序依次执行，前一个任务执行完毕后，才会执行下一个任务。
   • 执行过程中会阻塞后续代码的执行，直到该函数执行完成并返回结果。例如：

function add(a, b) {
    return a + b;
}
let result = add(2, 3);
console.log(result); // 输出 5

这里add函数是同步执行的，在add函数返回结果之前，console.log不会执行。 2. 异步函数：

• 异步函数不会阻塞后续代码的执行，它会在后台执行，当异步操作完成后，通过回调函数、Promise 或者async/await来处理结果。
• 这使得 JavaScript 可以在等待某个耗时操作（如网络请求、文件读取等）完成的同时，继续执行其他代码，提高了程序的响应性。例如在浏览器环境中发起一个网络请求：

// 这里使用 XMLHttpRequest 模拟异步网络请求（现代一般用 fetch 但原理类似）
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();
console.log('继续执行其他代码');

在上述代码中，xhr.send()是异步操作，在发起请求后，console.log('继续执行其他代码')会立即执行，而不会等待请求完成。

使用回调函数实现简单的异步操作

以下是一个模拟读取文件内容的简单异步操作示例（在 Node.js 环境中），使用setTimeout模拟文件读取的延迟：

function readFileAsync(fileName, callback) {
    setTimeout(() => {
        let content = `文件 ${fileName} 的内容`;
        callback(null, content);
    }, 1000);
}

readFileAsync('example.txt', (err, data) => {
    if (err) {
        console.error(err);
    } else {
        console.log(data);
    }
});
console.log('继续执行其他代码');

在这个例子中，readFileAsync函数模拟异步读取文件操作，setTimeout延迟 1 秒后调用回调函数callback。readFileAsync调用后，console.log('继续执行其他代码')会立即执行，1 秒后回调函数被调用处理读取结果。