javascript - 如何让Javascript同步运行函数

Question

在我的 asp.net mvc 应用程序中，我有一个按钮单击指向调用的 javascript

function OnButtonClick(s, e, startUrl, progressUrl) {
    Fetch(progressUrl);
    ImportUpdate(startUrl);
   }

Fetch 和 ImportUpdate 是 ajax jquery 到 Controller 操作。

 function Fetch(progressUrl) {
        positionDate = ReportingPositionDate.GetDate().toDateString();
        $.ajax({
            type: 'POST',
            url: "@Url.Action("BloombergFet", "ImportData")",
            data: JSON.stringify({ positionDate: positionDate }),
            dataType: "text",
            contentType: "application/json; charset=utf-8",
            beforeSend: function () { lpBloomberg.Show(); },
            success: function (msg) {
                ImportSuccessMessage.SetText(msg);
                lpBloomberg.Hide();
                lpImport.Show();

            },
            error: function (xhr, textStatus, errorThrown) {
                lpBloomberg.Hide()

            }
        });
    }

function ImportUpdate(progressUrl) {
        positionDate = ReportingPositionDate.GetDate().toDateString();
        myProgressBar.Show;
        $.ajax({
            type: 'POST',
            url: "@Url.Action("ProcessImportRecord", "ImportData")",
            data: JSON.stringify({ positionDate: positionDate }),
            dataType: "text",
            contentType: "application/json; charset=utf-8",
            beforeSend: function () { lpImport.Show(); },
            success: function (msg) {
            ImportDataGridView.PerformCallback();
            ImportSuccessMessage.SetVisible(true);
            ImportSuccessMessage.SetText(msg);
            lpImport.Hide();
        },
        error: function (xhr, textStatus, errorThrown) {
            ImportErrorMessage.SetVisible(true);
            ImportErrorMessage.SetText(xhr.statusText)
        }
    });
    }

目前这两种方法 Fetch(progressUrl)和ImportUpdate(progressUrl)同时被调用。我要 Fetch(progressUrl)完成，然后运行 ​​ImportUpdate。

我该如何实现这一目标。感谢所有帮助。

Answer 1

在第一个函数 Fetch(progressUrl) 的成功 block 中调用第二个函数 ImportUpdate(progressUrl)，如下所示:

function Fetch(progressUrl) {
    positionDate = ReportingPositionDate.GetDate().toDateString();
    $.ajax({
        type: 'POST',
        url: "@Url.Action("BloombergFet", "ImportData")",
        data: JSON.stringify({ positionDate: positionDate }),
        dataType: "text",
        contentType: "application/json; charset=utf-8",
        beforeSend: function () { lpBloomberg.Show(); },
        success: function (msg) {
            ImportSuccessMessage.SetText(msg);
            lpBloomberg.Hide();
            lpImport.Show();

            //Place call for ImportUpdate function here, like so
            ImportUpdate(startUrl);
        },
        error: function (xhr, textStatus, errorThrown) {
            lpBloomberg.Hide()

        }
    });
}

但是，就像 James 指出的那样，如果您想在每次调用 Fetch 后调用 ImportUpdate，那么将它们组合起来更有意义，除非您在其他地方独立调用 ImportUpdate(当 Fetch 没有首先调用时)。

顺便说一句，Kevin B. 可能指的是与 jQuery .post() 函数一起使用的回调，您可以像这样使用它:

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post( "example.php", function() {
  alert( "success" );
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
});

// Perform other work here ...

// Set another completion function for the request above
jqxhr.always(function() {
  alert( "second finished" );
});

因此，不要将函数调用放在当前 Fetch 函数的成功回调中，而是将其放在 .done 回调中，如下所示:

.done(function() {
    ImportUpdate(startUrl);
  })
  .fail(function() {
    //handle errors
  })