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密集计算之前触发页面重新渲染

2 个答案: