对MVC 4 Controller动作的同步javascript调用

Question

I'm writing piece of code, and I need some functions to be executed sequential, I used ajax call but it is asynchronous and i faced problems

function GetLibraryActivities(libraryName, callback) {
    $.ajax({
        dataType: "json",
        url: "/WorkflowDesigner/GetLibraryActivities/?libraryName=" + libraryName
    }).done(function (data) {
        console.log(data);
        return data;
    });
}

then I tried to work with callback function, but it didn't work too.

function GetLibraryActivities(libraryName, callback) {
    $.ajax({
        'url': "/WorkflowDesigner/GetLibraryActivities/?libraryName=" + libraryName,
        'type': 'GET',
        'success': callback
    });
}
GetLibraryActivities("Petrophysics", function (data) {
    petrophysicsData = data
});

when I try to use petrophysicsData variable under the code it returns unidentified , I need a mean to call a function in synchronous way, any help will be appreciated thanks.

Answer 1

Your main problem here is that you are trying to 'return' something from an AJAX callback. You cannot expect an Async AJAX function to return values to the script function that called it, because the function that called it moved on after the AJAX call started. That is the point of an Async call, it allows the javascript to move on and not have to wait for the server communication to complete.

The best way to handle this is to call all portions of a function in sequential order by using callbacks, never planning to use a return.

So, rather than returning data it would be best to instead call a function that processes data from within the callback function. It can be a little inconvenient, but when working with Async calls, it is best to assume that you can only go deeper into your call stack, rather than returning anything back out of it.

So, rather than your first option...you would want to do something like this instead...

function GetLibraryActivities(libraryName, callback) {
    $.ajax({
        dataType: "json",
        url: "/WorkflowDesigner/GetLibraryActivities/?libraryName=" + libraryName
    }).done(function (data) {
        console.log(data);
        ProcessResults(data);
    });
}

Or, simply perform your processing within the callback.

Pre jQuery 1.8, there was the 'async' option, that would allow you to force Javascript to wait for the ajax call to process...but this locks up the browser while it is processing, and has since been deprecated.

Answer 2

If you simply return the Ajax promise like this:

function GetLibraryActivities(libraryName, callback) {
    return $.ajax({
        'url': "/WorkflowDesigner/GetLibraryActivities/?libraryName=" + libraryName,
        'type': 'GET'
    });
}

you can do this to use the value:

GetLibraryActivities("Petrophysics").done(function (data) {
    // do something with petrophysics data
});

and chain them "sequentially" with then like this:

GetLibraryActivities("Petrophysics").then(GetLibraryActivities("Astrophysics")).done(function(pertro, astro){
    // Do something with both results};
});

In this example both will load in parallel, but the done will only be called with both promises have completed (in any order).

If you have loads of these to load, you can use $.when to process multiple promises.