Question

所以我在发布这个问题之前在SO和互联网上检查了很多例子。我想要的是：

我有一个页面，当用户点击一个按钮时，会进行冗长的计算，然后打开一个带有结果的新图层。我希望在进行计算时，使用“loading ...”消息显示叠加层。所以我的初始代码是：

function loadDetails()
{
   $('#load-msg').html("Loading...");

  //perform lengthy compute here...
  showDetailsLayer();
}

当然这不起作用，因为在加载...消息从未显示直到计算结束。根据我读到的内容，我意识到这是因为步骤是同步执行的。所以我将代码更新为：

function loadDetails()
    {
       setTimeut(
          function() {
            $('#load-msg').html("Loading...");
          },0);

      //perform lengthy compute here...
      //actual code to show layer here, instead of call to separate function
    }

然而，这仍然不起作用。我怎样才能使这个工作，以便在计算发生时收到加载消息，然后显示结果层？

我甚至试图把它放在一个函数中并使用_.defer中的underscore library来调用它，但即使这样也行不通！

任何指针都非常感谢！

Answer 1

您的第一次尝试修改了DOM，然后它使JS引擎太忙，无法处理重绘事件并更新显示。

你的第二次尝试推迟修改DOM，直到JS引擎空闲（这是0超时的作用），但是它让JS引擎太忙而不能这样做。

您需要将冗长的计算代码放入超时，而不是消息更新代码。

Answer 2

在你的情况下，jQuery的promise()可能有助于确保一切按照你想要的顺序发生：

function loadDetails()
{
    $('#load-msg').html("Loading...").promise().done(function(){
        //perform lengthy compute here...
        showDetailsLayer();
    });
}

（参见：jquery html() callback function和http://digitizor.com/jquery-html-callback-function-using-promise/）

无法进行异步JavaScript调用

2 个答案: