Question

我想在一些复杂的函数之前显示一个微调器，即dummyCounter（）。代码如下：

function add1() {
  msg.html('start counting~<br \>');
  document.body.appendChild(div);  
  spinner.spin(div);  
  // display spinner before doing stuff

  dummyCounter();  
}

jsfiddle：http://jsfiddle.net/eGB5t/

然而，在dummyCounter（）函数完成后，微调器显示。

我尝试使用回调来强制微调器显示，但仍然没有好处。有人可以帮忙吗？感谢。

jsfiddle：http://jsfiddle.net/eGB5t/2/

Answer 1

你的思维失败了。旋转器通常用于异步任务，因此您可以看到正在进行某些操作。然后在异步操作完成时使用回调来移除旋转，因为在它完成之前你无法告诉它。

我编写了一个快速示例向您展示，在这种情况下，这样的异步函数将如何工作，并且您可以清楚地看到微调器在“google finished”出现之前是如何出现的。 http://jsfiddle.net/eGB5t/4/

我添加了以下内容而不是您的计数方法：

$.ajax("http://google.de").always(function() {
    msg.append("google finished");
});

您在计算之前添加旋转，然后计数，然后您可以删除微调器。这是完美的。事情是，如果你想要说9999999999999（所以它需要几秒钟），像你正在做的正常循环是完全阻止浏览器，所以你不会有任何重绘（因此没有微调）所有，当循环运行时。

您需要做的是（在这种情况下）将工人介绍multithreading functionality in javascript。

Answer 2

var x;
function add1() {
  msg.html('start counting~<br \>');

spinner.spin(div);
x= setTimeout(document.body.appendChild(div),500);
}

如何在执行某些功能之前显示spin.js？

2 个答案: