JavaScript切换类后样式不生效 浏览器未及时重绘问题

问题场景 #

执行耗时网格生成逻辑时，需要在按钮位置隐藏原有按钮文本、原位显示加载旋转器（spinner）。实际运行时出现异常：开发者工具中可观测到元素类名已经正确切换，但对应样式始终未生效。
当传入的网格尺寸较大时，generateGrid函数执行耗时可达3秒左右，整个处理过程中按钮始终显示原有文本，无加载状态提示。

现有实现代码 #

JavaScript 逻辑 #

function toggleSpinner() {
    $('button span').toggleClass('display-none');
    $('button .fa-spinner').toggleClass('display-none');
}

function generateGrid(size) {
    let arr = getRandomNumbers(size);

    toggleSpinner(); // <--- 隐藏文本显示spinner
    $('.grid').empty();

    let html = '';
    arr.forEach((element) => {
        html += '<div class="box">' + element.toLocaleString() + '</div>';
    });
    $('.grid').append(html);

    toggleSpinner(); // <--- 隐藏spinner显示文本
}

HTML 结构 #

<button>
    <span>Generate Random Numbers</span>
    <i class="fas fa-spinner fa-spin display-none"></i>
</button>

实际表现与预期差异 #

• 预期效果：第一次调用toggleSpinner()时，按钮隐藏文本，仅显示旋转加载图标；网格生成完成后第二次调用toggleSpinner()，隐藏加载图标，恢复显示按钮文本。
• 实际现象：类切换操作确实已执行，但浏览器会等到所有同步任务执行完毕后才会触发页面重绘，相当于两次toggleSpinner()连续执行后元素类直接回到初始状态，最终按钮没有任何样式变化。

问题根因 #

浏览器UI渲染线程与JavaScript执行线程是互斥的，同步执行的JS代码会阻塞页面重绘。
当前代码中两次toggleSpinner()调用和中间的耗时网格生成逻辑都处于同一个同步任务栈：第一次切换类名后浏览器还没来得及执行重绘，就继续执行后续的耗时逻辑；等耗时逻辑执行完成后，立刻触发第二次toggleSpinner()把类名切回初始状态，等所有同步任务清空浏览器才执行重绘，此时类名已经回到初始值，自然看不到加载状态。

修复方案 #

第一次调用toggleSpinner()后，给浏览器留出完成页面重绘的时间，再执行耗时的网格生成逻辑，等逻辑执行完成后再切回按钮原有状态。
可以通过requestAnimationFrame把耗时逻辑推迟到浏览器下一次重绘完成后执行，修复后的代码如下：

function toggleSpinner() {
    $('button span').toggleClass('display-none');
    $('button .fa-spinner').toggleClass('display-none');
}

async function generateGrid(size) {
    let arr = getRandomNumbers(size);

    toggleSpinner();
    // 等待浏览器完成当前帧重绘，确保spinner样式生效
    await new Promise(resolve => requestAnimationFrame(resolve));

    $('.grid').empty();
    let html = '';
    arr.forEach((element) => {
        html += `<div class="box">${element.toLocaleString()}</div>`;
    });
    $('.grid').append(html);

    toggleSpinner();
}

如果项目中不支持async/await语法，也可以用setTimeout把耗时逻辑包裹，设置延迟0ms即可将任务推到下一个事件循环，也能实现相同效果，只是requestAnimationFrame的触发时机和浏览器渲染节奏更匹配，表现更稳定。

内容的提问来源于stack exchange，提问作者dokgu