JavaScript事件循环深入讲解及常见误区

console.log('1. 同步代码开始');

setTimeout(() => {
    console.log('6. 宏任务1 - setTimeout');
    Promise.resolve().then(() => {
        console.log('7. 微任务3 - Promise');
    });
}, 0);

Promise.resolve().then(() => {
    console.log('3. 微任务1 - Promise');
    return Promise.resolve();
}).then(() => {
    console.log('4. 微任务2 - Promise');
});

console.log('2. 同步代码结束');

// 输出顺序：
// 1. 同步代码开始
// 2. 同步代码结束
// 3. 微任务1 - Promise
// 4. 微任务2 - Promise
// 6. 宏任务1 - setTimeout
// 7. 微任务3 - Promise

// 动画帧控制
function animate() {
    // 动画逻辑
    requestAnimationFrame(animate); // 比setTimeout更适合动画
}
animate();

// 轮询检查
function poll() {
    fetch('/api/status')
        .then(checkStatus)
        .then(() => setTimeout(poll, 5000));
}

function loadData() {
    return fetch('/api/data')
        .then(response => response.json())
        .then(data => {
            // 处理数据
            return processData(data);
        })
        .catch(error => {
            // 错误处理
            console.error(error);
        });
}

// 防抖处理高频事件
function debounce(fn, delay) {
    let timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, arguments), delay);
    };
}

window.addEventListener('scroll', debounce(() => {
    // 处理滚动逻辑
}, 100));

// 错误示范：同步计算阻塞UI
function heavyCalc() {
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
        result += Math.sqrt(i);
    }
    return result;
}

// 正确做法：分片处理
async function chunkedHeavyCalc() {
    let result = 0;
    for (let i = 0; i < 100000000; i += 100000) {
        result += await chunkCalc(i, Math.min(i + 100000, 100000000));
        // 允许浏览器渲染
        await new Promise(resolve => requestAnimationFrame(resolve));
    }
    return result;
}

// 可能导致无限循环
function microtaskLoop() {
    Promise.resolve().then(microtaskLoop);
}
// microtaskLoop(); // 不要这样做！

// 需要立即执行的任务使用微任务
function urgentTask(callback) {
    Promise.resolve().then(callback);
}

// 不紧急的任务使用宏任务
function backgroundTask(callback) {
    setTimeout(callback, 0);
}