Why does $.get gets delayed in execution of this code?

Question

I have a function that is within a parser function that uses $.get(). I have placed a number of alerts within the code to help me understand what it is doing. From these alerts, it appeared that the $.get did not executed at all until everything else got executed. Can someone help me understand why it did what it did? And I guess how I can make it run first?

This code is being hosted and run on sharepoint online. The parsed file is also on sharepoint online within the same site. As evidenced by the fact that the alerts within the $.get() block showing, it seems the file has been properly retrieved - it's just that it was not done at the desired time.

// Declared object
var weewee = {};

// Ready
$( document ).ready(function() {
    weewee.catDatapath = "SOME FILE PATH FOR TESTING";
    weewee.catHierarchy = readCat(weewee.catDatapath);
    alert("catHierarchy length is " + weewee.catHierarchy.length);
});

// Actual parse function
function readCat (filePath) {
    var arrReturn = [];
    alert("readCat just ran");

    $.get(filePath, function(data) {
        alert("this is a test for readCat - data length raw is " + data.length);

        var arrRaw = data.split(/\r\n|\n|\r/);

        for (var i in arrRaw) {
            console.log(arrRaw[i]);
            alert("parser run");
        }
    }, 'text');

    alert("readCat end before return");
    return arrReturn;
}

Within the code below, this is the sequence of the alerts popping up:

readCat just ran

readCat end before return

Hierarchy length is 0

this is a test for readCat - data length raw is xxxx

parser run

So, why didn't it go:

readCat just ran

this is a test for readCat - data length raw is xxxx

parser run

readCat end before return

Hierarchy length is yyyy

`get` is an async call - it takes time for the call to complete. While the call is completing, the rest of your code runs. Think of it like ordering food. You call the place, place your order, hang up the phone, continue with your life, then sometime later your food is delivered (callback) — tymeJV, Jan 22 '19 at 15:51

score -1 · Answer 1 · answered Jan 22 '19 at 15:57

Try updating readCat to...

function readCat (filePath) {
    alert("readCat just ran");
    $.get(filePath, function(data) {
        alert("this is a test for readCat - data length raw is " + data.length);
        var arrReturn = [];

        var arrRaw = data.split(/\r\n|\n|\r/);

        for (var i in arrRaw) {
            console.log(arrRaw[i]);
            alert("parser run");
        }

        return arrReturn;
    }, 'text')
    .fail(function() {
        return [];
    });

    alert("readCat end before return");
    return arrReturn;
}

The issue you are having is that $.get is async so you are performing the return before the request is returned and processed.

Why does $.get gets delayed in execution of this code?

1 Answers1