javascript - JS密集计算前触发页面重新渲染

Question

如何在长计算 JS 函数之前强制使用 jQuery 显示对象？我想在函数开始之前简单地显示字体很棒的旋转轮。当我调试它时，它工作正常，因为我的调试步骤之间存在中断，但是当我运行页面时，它不会显示旋转轮，而是直接进入函数。

$('#waitSpinner').show();
longCalculation();

Answer 1

将您的计算放入事件队列中:

setTimeout(longCalculation, 1);

这将允许在计算之前重绘。您还可以查看Web Workers作为在后台线程中执行计算的一种方式:

var spinner = $('#waitSpinner');
spinner.show();
var worker = new Worker('calculation.js');
worker.onmessage = function (e) {
  console.log('Result is ' + e.data);
  spinner.hide();
};

// calculation.js

longCalculation();
postMessage(calculationResult);