Невозможно сделать асинхронный вызов JavaScript

Question

Итак, перед публикацией этого вопроса я проверил множество примеров как в SO, так и через Интернет. То, что я хотел, было следующее:

У меня есть страница, где, когда пользователь нажимает кнопку, выполняется длительное вычисление, а затем открывается новый слой с результатами. Я хотел, чтобы при вычислении отображалось оверлей с сообщением «загрузка ...». Так что мой исходный код был:

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