How to make Javascript run function synchronously

Question

In my asp.net mvc app, I have button click that points to a javascript which calls

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

Fetch and ImportUpdate are ajax jquery to a controller action.

 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)
        }
    });
    }

Currently both the methods Fetch(progressUrl) and ImportUpdate(progressUrl) are called at the same time. I want Fetch(progressUrl) to complete and then ImportUpdate to run.

How do I achieve this. Appreciate all help.

If you always want to Fetch followed by ImportUpdate, I would suggest you combine them into a single API call. — James, Apr 12 '17 at 15:32

Matt · Accepted Answer · 2017-04-17T18:04:17.707

Call your second function ImportUpdate(progressUrl) in the success block of the first function Fetch(progressUrl) like so:

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

        }
    });
}

However, like James pointed out, if you want to call ImportUpdate after every time that Fetch is called, it makes more sense to just combine them UNLESS you call ImportUpdate independently somewhere else, when Fetch is not called first.

BTW, the callbacks Kevin B. is probably referring to are used with the jQuery .post() function, which you can use like this:

// 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" );
});

so instead of putting your function call in the success callback of your current Fetch function you'd put it in .done callback like so:

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

score 1 · Answer 2 · answered Apr 12 '17 at 15:18

1

Put ImportUpdate(progressUrl) inside your success callback function for Fetch(progressUrl)

answered Apr 12 '17 at 15:18

Kody R.

2,430
5
22
42

How to make Javascript run function synchronously

2 Answers2