掌握JavaScript异步编程技巧

JavaScript中的异步编程允许你在不阻塞主线程的情况下完成任务，使你的代码能够同时进行多个操作。

这对于保持界面的响应性至关重要，尤其是在开发阶段，比如从服务器获取数据、读文件或等待用户输入这些事情可能都需要点时间。

JavaScript 异步编程的关键概念：

回调函数：一种处理异步操作的原始方法。

• 作为参数传递给另一个函数的函数，在操作完成后执行。
• 这里的问题是——会导致“回调地狱”，即嵌套的回调会变得难以管理和阅读。

    // 获取数据的函数
    function fetchData(callback) {  
        setTimeout(() => {  
            callback('获取数据');  
        }, 1000);  
    }  

    fetchData((data) => {  
        console.log(data);  
    });

Promise： 为了避开“回调地狱”，我们引入了Promise来简化异步事件的处理。

• 一个承诺表示一个值，这个值可能现在、将来或永远都不会出现。
• 状态有：等待中、已完成、已拒绝。

const 获取数据 = () => {  
    return new Promise((resolve, reject) => {  
        setTimeout(() => {  
            resolve('数据已接收');  
        }, 2000);  
    });  
};  

获取数据().then(data => console.log(data));

异步: 为了让代码更易读和管理起来更方便，JavaScript 引入了一种同步编写代码的方法。

在这里，async 函数返回一个 Promise，而 await 会暂停函数的执行，直到 Promise 完成。

// 获取并打印数据，模拟异步操作，等待2秒后解析数据
const fetchData = async () => {  
    const 结果 = await new Promise((resolve) => {  
        setTimeout(() => {  
            resolve('数据已接收');  
        }, 2000);  
    });  
    console.log('数据已接收: ' + 结果);  
};  

fetchData();

setTimeout 和 setInterval:

• **setTimeout**：在指定延迟后执行一个函数一次。
• **setInterval**：按照指定间隔重复执行一个函数。

    setTimeout(() => {  
        console.log('2秒后执行这个');  
    }, 2000);  

    setInterval(() => {  
        console.log('每2秒执行一次这个');  
    }, 2000);

• 从API接口获取数据
  • 处理用户输入和事件
  • 动画和定时器
  • 文件读写

• 非阻塞操作： 防止UI在等待任务时冻结。
• 性能增强： 允许同时执行多个任务，从而实现更快、更高效的应用程序。
• 用户体验： 通过使应用程序更响应和互动，增强用户体验。