jQuery: функция не будет выполнена, пока не завершится вызов ajax

Question

На моем сайте есть текстовая область TinyMCE.Когда я нажимаю кнопку «Сохранить», функция save ();называется.Он должен заблокировать редактор TinyMCE во время сохранения (предположим, что save.php загружается несколько секунд).Хотя formProgress (1) является первой строкой кода в моей функции save (), она не будет выполнена сразу же.Редактор просто на мгновение блокируется ПОСЛЕ завершения вызова ajax.Кто-нибудь знает, как это исправить?

function save()
{
 formProgress(1); //why won't this be executed right away? for some reason i can see the result of this only when the ajax call is complete?!
 jQuery.ajax({
  url: 'save.php',
  type: 'POST',
  data: 'html=' + $('textarea[name=content_html]').tinymce().getContent(),
  completed: function() { formProgress(0); },
  async : false
 });
}

function formProgress(mode)
{
  if(mode == 1)
  {
    $('textarea[name=content_html]').tinymce().setProgressState(1);
  }
  else
  {
    $('textarea[name=content_html]').tinymce().setProgressState(0); 
  }
}

Answer 1

Это завершает сразу, проблема здесь:

async : false

Способ async: false работает также блокирует ваш браузер, так что, хотя вседо того, как произойдет раньше ... но ваш пользовательский интерфейс заблокирован и не будет обновляться до завершения XmlHttpRequest.

Это одна из основных причин, по которой не следует использовать async: false, когда это возможно.

Answer 2

Попробуйте этот вызов функции асинхронно, используя settimeout, например.

function save()
{
    setTimeout("formProgress(1)",1000);
    // AJAX call
}

Answer 3

метод setProgressState принимает в качестве параметра задержку для появления.

Это означает, что он вызывается с setTimeout, поэтому это объясняет, почему он еще не был показан, когда код перемещается на следующую строку .. (вызов ajax)