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);

Answer 2

您可以指定对 show 方法的回调，以便在 .show() 完成后执行您的下一段代码。

示例：

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

或者您可以使用像这样的匿名函数来做到这一点

$('#waitSpinner').show('fast', function(){
     longCalculation()
});

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

Trigger page re-rendering before JS intensive calculation

javascript

jquery

font-awesome