JavaScript系列（23）--事件循环机制详解

JavaScript事件循环机制详解 🔄

今天，让我们深入探讨JavaScript的事件循环机制。事件循环是JavaScript实现异步编程的核心机制，理解它对于编写高性能的JavaScript代码至关重要。

事件循环基础概念 🌟

💡 小知识：JavaScript是单线程的，但通过事件循环机制，它能够处理异步操作而不会阻塞主线程。事件循环由调用栈、任务队列（宏任务）和微任务队列组成。

事件循环的核心组件 📊

// 1. 调用栈示例
function stackDemo() {
   
    function multiply(a, b) {
   
        return a * b;
    }
    
    function square(n) {
   
        return multiply(n, n);
    }
    
    function printSquare(n) {
   
        const result = square(n);
        console.log(result);
    }
    
    printSquare(5);  // 调用栈: printSquare -> square -> multiply
}

// 2. 宏任务和微任务
function taskDemo() {
   
    // 宏任务
    setTimeout(() => {
   
        console.log('Timeout 1');
        // 微任务
        Promise.resolve().then(() => {
   
            console.log('Promise 2');
        });
    }, 0);
    
    // 微任务
    Promise.resolve().then(() => {
   
        console.log('Promise 1');
        // 宏任务
        setTimeout(() => {
   
            console.log('Timeout 2');
        }, 0);
    });
    
    console.log('Main script');
}
// 输出顺序：
// Main script
// Promise 1
// Timeout 1
// Promise 2
// Timeout 2

// 3. requestAnimationFrame示例
function animationDemo() {
   
    let start = null;
    
    function animate(timestamp) {
   
        if (!start) start = timestamp;
        const progress = timestamp - start;
        
        // 执行动画
        document.querySelector('.box').style.transform = 
            `translateX(${
     Math.min(progress / 10, 200)}px)`;
            
        if (progress < 2000) {
   
            requestAnimationFrame(animate);
        }
    }
    
    requestAnimationFrame(animate);
}

事件循环的高级特性 🚀

// 1. 自定义事件循环实现
class SimpleEventLoop {
   
    constructor() {
   
        this.macroTaskQueue = [];
        this.microTaskQueue = [];
        this.running = false;
    }
    
    addMacroTask(task) {
   
        this.macroTaskQueue.push(task);
        this.run();
    }
    
    addMicroTask(task) {
   
        this.microTaskQueue.push(task);
    }
    
    async run() {
   
        if (this.running) return;
        this.running = true;
        
        while (this.macroTaskQueue.length || this.microTaskQueue.length) {
   
            // 执行所有微任务
            while (this.microTaskQueue.length) {
   
                const microTask = this.microTaskQueue.shift();
                try {
   
                    await microTask();
                } catch (error) {
   
                    console.error</