Why Does This Alert Fire Before Earlier Code Has Finished Executing?

I have some javascript code which executes when a link is clicked. after that code has executed I want to display an alert, however the alert is being shown before the earlier code

Solution 1:

In that case, you'll need to extend readText to accept a callback function:

functionreadText(blob, callback) {
    var reader = newFileReader();
    reader.onload = callback;
    // whatever else your function does to load the file
}

Then you invoke it like this:

readText(blob, function() {
    alert('entire file loaded');
});

Of course if readText itself delegates its asynchronous work somewhere else, you'll have to pass the callback there too.

If the actual asynchronous function doesn't accept a callback parameter, you'll want to check for another way that it signals its caller of completeness. It may fire events. But that all really depends on how readText is implemented.

Solution 2:

You mentioned that readText is an asynchronous method. This is why the alert shows before readText has finished executing. The for loop will run through all its iterations by which time calls to readText have not finished. The next statement to execute after the for, is the alert which is what you're seeing.

If readText provides a callback function, you will have to use that:

var counter = 0;
for (var i = 0; i < loops; i++) {
    var blob = file.slice(start, stop);
    readText(blob, function() {
        counter++;
        if(counter === loops) {
            alert("entire file loaded");
        }
    });
    start = stop;
    stop += chunkLength;
}

This doesn't guarantee order of operations however. It is entirely possible that a call on a later iteration finishes before a call from an earlier iteration.

If readText doesn't have a callback argument and you can modify the source of that function, you will have to do something like this:

function readText(blob, callback) {
    ...

    if(typeof callback === "function") {
        callback();
    }
}