原生JS：执行计算密集型任务时显示加载动画的问题

问题根源 #

JavaScript是单线程模型，当执行耗时的同步计算（如大循环的sigmaCalc）时，会完全阻塞UI线程。你先调用rechenanimation(true)设置动画，但UI线程还没来得及渲染这个变化，就被后续的计算任务和rechenanimation(false)覆盖，导致页面挂起、动画无法显示。

最优解决方案：用Web Worker隔离计算任务 #

Web Worker能在后台独立线程执行计算，完全不阻塞UI，既能显示加载动画，又能保证计算正常进行。

1. 创建Worker文件（sigma-worker.js） #

self.onmessage = function(e) {
    const { start, end, exp } = e.data;
    let sum = 0;
    const safeExp = exp.replace('^', '**');
    
    // 校验表达式安全性
    if (!safeExp.match(/^[\d\+\-\*\/\(\)n]+$/)) {
        self.postMessage(NaN);
        return;
    }
    
    // 预编译表达式，替代循环内重复eval，提升性能
    const calcFn = new Function('n', `return ${safeExp}`);
    
    // 执行计算
    for (let n = Number(start); n <= Number(end); n++) {
        sum += calcFn(n);
    }
    
    // 向主线程返回结果
    self.postMessage(sum);
};

2. 修改主页面逻辑 #

替换原表单的onsubmit内联事件，改用JS事件监听：

// 全局维护Worker实例
let sigmaWorker;

// 初始化Worker
function initWorker() {
    if (!sigmaWorker) {
        sigmaWorker = new Worker('sigma-worker.js');
    }
}

// 调用Worker执行计算
function runSigmaCalc(start, end, exp, onComplete) {
    initWorker();
    // 终止之前未完成的任务（避免重复计算）
    sigmaWorker.terminate();
    sigmaWorker = new Worker('sigma-worker.js');
    
    sigmaWorker.onmessage = function(e) {
        onComplete(e.data);
    };
    sigmaWorker.postMessage({ start, end, exp });
}

// 绑定表单提交事件
document.querySelector('#sigmarechner').addEventListener('submit', function(e) {
    e.preventDefault();
    const nVal = this.querySelector('input[name=n]').value;
    const mVal = this.querySelector('input[name=m]').value;
    const fVal = this.querySelector('input[name=f]').value;
    const resultInput = this.querySelector('input[id=r]');

    // 显示加载动画
    rechenanimation(true);
    // 启动后台计算
    runSigmaCalc(nVal, mVal, fVal, function(result) {
        resultInput.value = result;
        resultInput.select();
        // 移除加载动画
        rechenanimation(false);
    });
});

兼容方案：优化同步计算+拆分任务 #

如果无法使用Web Worker，可通过优化计算逻辑+拆分循环的方式，让UI线程获得渲染机会。

1. 优化sigmaCalc函数 #

function sigmaCalc(start, end, exp, onComplete) {
    let sum = 0;
    start = Number(start);
    end = Number(end);
    const safeExp = exp.replace('^', '**');
    
    if (!safeExp.match(/^[\d\+\-\*\/\(\)n]+$/)) {
        onComplete(NaN);
        return;
    }
    
    // 预编译表达式，提升性能
    const calcFn = new Function('n', `return ${safeExp}`);
    // 每次处理10000个批次，平衡计算速度与UI响应
    const batchSize = 10000;
    let current = start;

    function processBatch() {
        const batchEnd = Math.min(current + batchSize - 1, end);
        // 处理当前批次
        for (; current <= batchEnd; current++) {
            sum += calcFn(current);
        }
        // 未完成则继续，交回UI线程渲染
        if (current <= end) {
            requestIdleCallback(processBatch);
        } else {
            // 计算完成回调
            onComplete(sum);
        }
    }

    processBatch();
}

2. 修改表单提交逻辑 #

document.querySelector('#sigmarechner').addEventListener('submit', function(e) {
    e.preventDefault();
    const nVal = this.querySelector('input[name=n]').value;
    const mVal = this.querySelector('input[name=m]').value;
    const fVal = this.querySelector('input[name=f]').value;
    const resultInput = this.querySelector('input[id=r]');

    rechenanimation(true);
    sigmaCalc(nVal, mVal, fVal, function(result) {
        resultInput.value = result;
        resultInput.select();
        rechenanimation(false);
    });
});

关键优化说明 #

1. 预编译表达式：用new Function替代循环内重复的eval和字符串替换，计算速度提升数倍
2. 避免同步阻塞：Web Worker或拆分任务的方式，让UI线程有机会渲染加载动画
3. 类型提前转换：将输入的字符串提前转为数字，避免循环内重复类型转换

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