Javascript: Set The Order Of Functions

I'm writing a titanium app but I'm having an issue with the execution order of my javascript. I have an event listener on a button. It's a reload button that clears a table, uses H

Solution 1:

Synchronous calls give you coordination (code won't execute until any computation it depends on finishes) for free. With asynchronous calls, you have to take care of coordination. This generally means passing the dependent code as a function to the asynchronous code. The passed code is known as a "continuation", which means "the rest of the calculation, from a given point forward". Passing continuations around is known as (unsurprisingly) "continuation passing style".

To rewrite code in CPS, identify the point(s) where you need to coordinate the code (the call to appointments.download), then wrap the rest of the code in a function.

btnReload.addEventListener('click', function(e){
    var affected = db.deleteAll();
    appointments.download();
    function () {
        var allAppointments = db.all();
        Ti.API.info(allAppointments);
        appointmentList.setData(allAppointments);
    }
});

In the general case, the return value becomes the argument to the continuation. Here, no return value for appointments.download is used, so the continuation takes no arguments.

Next, rewrite the asynchronous function to take the continuation and pass the continuation in the call.

btnReload.addEventListener('click', function(e){
    var affected = db.deleteAll();
    appointments.download(
        function () {
            var allAppointments = db.all();
            Ti.API.info(allAppointments);
            appointmentList.setData(allAppointments);
        });
});

...
api.download = function(_return){
    var xhr = Titanium.Network.createHTTPClient();
    xhr.onload = function() {
        var data = JSON.parse(this.responseText);
        var dl = (data.length);
        for (i=0; i<dl;i++) {
            //p = addRow(data,i); // returns the **arr array 
            //Ti.API.info('Saving : '+data[i].first_name);
            var contact_name = data[i].first_name + ' ' + data[i].last_name;
            var start_date = data[i].start_date;
            var reference = data[i].reference;
            var comment = data[i].comment;
            var appointment_id = data[i].quote_id;

            var lastid = db.create(appointment_id, start_date, reference, contact_name, comment);
            //Ti.API.info(lastid);
        }
        _return();
    };
    xhr.open('GET','http://********.co.uk/appointments/download/');
    xhr.send();

    return;
}

The continuation is named _return because the return statement can be modeled as a continuation (the default continuation). Calling _return in the asynchronous version would have the same affect as calling return in the synchronous version.

Solution 2:

Currently you are making requests asynchronously which means you make a request and return from the function immediately, you don't wait for an answer. You should make your calls synchronous, I don't know what your conn and xhr really are but they might provide ways to make the execute() and send() methods synchronous. For example if you set the third argument of JavaScript's own XMLHttpRequest's open() method to false then send() method will not return until a response is received from the server, your connection classes might have the same option.

Solution 3:

Move the call to delete the current appointments into the onload handler. That way you will delete the old and immediately add the new data.