【前端开发】JS同步与异步调用

一、JS同步与异步调用
同步调用是指代码按照其编写的顺序执行，每个函数都必须等待前一个函数完成后才能执行。这种调用方式会阻塞代码的执行，直到当前函数执行完成才能执行下一个函数。
正常的直接代码写下来调用就是同步调用。

异步调用是指代码不按照其编写的顺序执行，而是在某些操作完成后再执行。例如，当我们使用 Ajax 请求数据时，我们可以在请求发送后继续执行代码，而不必等待请求完成。 异步调用不会阻塞代码的执行，可以在后台执行其他操作。

1、异步调用函数：使用回调函数实现异步调用

function asyncFunction(callback) {
　　console.log("Start");
　　setTimeout(function() {
　　　　console.log("End");
　　　　callback();
　　}, 2000);
}

console.log("Before function call");
asyncFunction(function() {
　　console.log("Callback");
});
console.log("After function call");

 

在这个例子中，我们定义了一个 asyncFunction 函数，它使用 setTimeout 函数模拟了一个异步操作，并在操作完成后调用了回调函数。在主程序中，我们先输出 “Before function call”，然后调用 asyncFunction 函数，并传入一个回调函数。由于 asyncFunction 是异步调用，因此代码不会等待操作完成，而是直接执行后面的代码。因此，输出的顺序为 “Before function call”、“Start”、“After function call”、2 秒后输出 “End”、“Callback”。

2、使用 Promise 实现异步调用：

function asyncFunction() {
　　console.log("Start");
　　return new Promise(function(resolve, reject) {
　　　　setTimeout(function() {
　　　　　　console.log("End");
　　　　　　resolve();
　　　　}, 2000);
　　});
}

console.log("Before function call");
asyncFunction().then(function() {
　　console.log("Promise resolved");
});
console.log("After function call");

 

在这个例子中，我们定义了一个 asyncFunction 函数，它返回一个 Promise 对象，并在异步操作完成后调用 resolve 函数。在主程序中，我们先输出 “Before function call”，然后调用 asyncFunction 函数，并使用 then 方法注册一个回调函数。由于 asyncFunction 是异步调用，因此代码不会等待操作完成，而是直接执行后面的代码。因此，输出的顺序为 “Before function call”、“Start”、“After function call”、2 秒后输出 “End”、“Promise resolved”。

3、使用 async/await 实现异步调用：

async function asyncFunction() {
　　console.log("Start");
　　await new Promise(function(resolve, reject) {
　　　　setTimeout(function() {
　　　　　　console.log("End");
　　　　　　resolve();
　　　　}, 2000);
　　});
}

console.log("Before function call");
asyncFunction().then(function() {
　　console.log("Promise resolved");
});
console.log("After function call");

 

在这个例子中，我们定义了一个 asyncFunction 函数，它使用 await 关键字等待异步操作完成，并在操作完成后继续执行。在主程序中，我们先输出 “Before function call”，然后调用 asyncFunction 函数，并使用 then 方法注册一个回调函数。由于 asyncFunction 是异步调用，因此代码不会等待操作完成，而是直接执行后面的代码。因此，输出的顺序为 “Before function call”、“Start”、“After function call”、2 秒后输出 “End”、“Promise resolved”。

原文链接：https://blog.csdn.net/qq_33957603/article/details/133212759