学会JS回调与延时：轻松实现代码执行顺序控制

JavaScript 作为一种异步编程语言，其回调函数和延时（如 setTimeout）是控制代码执行顺序的重要手段。通过合理运用回调和延时，我们可以轻松实现复杂的执行逻辑，下面将详细介绍如何使用这些功能。

回调函数

回调函数是一种将函数作为参数传递给另一个函数的技术。在 JavaScript 中，回调函数通常用于处理异步操作，如网络请求、文件读写等。以下是一个简单的例子：

function fetchData(callback) {
    // 模拟异步操作
    setTimeout(() => {
        callback('数据获取成功');
    }, 1000);
}

function handleResponse(response) {
    console.log(response);
}

fetchData(handleResponse);

在上面的例子中，fetchData 函数模拟了一个异步操作，并通过 setTimeout 在 1 秒后执行回调函数 handleResponse。

延时函数

setTimeout 函数是 JavaScript 中最常用的延时函数之一。它允许我们在指定的毫秒数后执行一个函数。以下是一个使用 setTimeout 的例子：

setTimeout(() => {
    console.log('延时函数执行');
}, 2000);

在上面的例子中，setTimeout 将在 2 秒后执行匿名函数，输出 “延时函数执行”。

回调地狱

尽管回调函数和延时函数在处理异步操作时非常有用，但过度使用回调会导致所谓的“回调地狱”。这种情况下，代码会变得越来越难以阅读和维护。以下是一个回调地狱的例子：

function fetchData(callback1) {
    setTimeout(() => {
        callback1('数据1');
    }, 1000);
}

function handleData1(data1, callback2) {
    setTimeout(() => {
        callback2('数据2');
    }, 1000);
}

function handleData2(data2) {
    console.log(data2);
}

fetchData(handleData1);

为了解决这个问题，我们可以使用 Promise 和 async/await 语法来简化代码。

Promise

Promise 是一个对象，它代表了异步操作最终完成（或失败）的状态。以下是一个使用 Promise 的例子：

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('数据获取成功');
        }, 1000);
    });
}

fetchData().then(response => {
    console.log(response);
});

在上面的例子中，fetchData 函数返回一个 Promise 对象，该对象在 1 秒后解析为 “数据获取成功”。

async/await

async/await 是一种更简洁的异步编程方式，它允许我们使用类似于同步代码的语法来编写异步代码。以下是一个使用 async/await 的例子：

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('数据获取成功');
        }, 1000);
    });
}

async function main() {
    const response = await fetchData();
    console.log(response);
}

main();

在上面的例子中，main 函数是一个异步函数，它使用 await 关键字等待 fetchData 函数的结果。

总结

通过掌握回调函数、延时函数、Promise 和 async/await，我们可以轻松控制 JavaScript 代码的执行顺序，从而实现复杂的异步逻辑。在实际开发中，合理运用这些技术将使我们的代码更加清晰、易读、易维护。