Javascript trouble with callbacks to execute asynchronous calls synchronously

Question

After reading this thread How should I call 3 functions in order to execute them one after the other?, I am still unsure why this doesn't work and having trouble making asynch calls synchronous:

function testCallBack(){
    one(two);
}
function one(callback){
    setTimeout(function(){alert("delay 1")},2000);
    callback();
}
function two(){
    setTimeout(function(){alert("delay 2")},1000);
}

How can I make two() wait until one() completes? I still see "delay 2" before I see "delay 1".

EDIT: The above is a simplified example of what I want to do, just trying to do a hello world for callbacks. I am trying to apply it like this:

function add() {
    addCalendar(getCalendarID);
}
function addCalendar(callback) {
    var req = gapi.client.calendar.calendars.insert(
    {
        "resource": 
        {"summary": "McGill Schedule",
            "description": "Winter 2015",
            "timezone": "Canada/Montreal"}
    });
    req.execute(function(resp) {
        console.log("added calendar");
        callback();
    });
}
function getCalendarID() {
    var req = gapi.client.calendar.calendarList.list({});
    req.execute(function(resp) {
        for (var i = 0; i < resp.items.length; i++) {
            if (resp.items[i].summary === "McGill Schedule") {
                console.log("Mcgill Sched id: " + resp.items[i].id);
                calendarID = resp.items[i].id;
                break;
            }
        }
    });
}

Which still doesn't seem to work even with the callback() inside the response of the api call.

What does "completes" mean to you? If you want to wait until after the alert(), then that setTimeout function is wherein you need to put the callback() call. — Bergi
– Bergi, Commented May 18, 2015 at 22:53
@Bergi see my edit above - when I run that I dont even see the console.log("Mcgill Sched ...") for some reason. — connorwstein
– connorwstein, Commented May 18, 2015 at 23:19
Can you point me to some documentation for gapi.client.calendar...? — jcuenod
– jcuenod, Commented May 18, 2015 at 23:34
gapi.client is the javascript client for google apis (here: developers.google.com/api-client-library/javascript/start/…), the calendar specific stuff is here developers.google.com/google-apps/calendar/v3/reference — connorwstein
– connorwstein, Commented May 18, 2015 at 23:41
Never mind it magically starting working! I have this hosted on github pages so it might just have taken a while to update. Thanks for your help. — connorwstein
– connorwstein, Commented May 18, 2015 at 23:58

jcuenod · Accepted Answer · 2015-05-18 22:52:45Z

1

You need to move the callback:

function testCallBack(){
    one(two);
}
function one(callback){
    setTimeout(function(){
        alert("delay 1");
        callback();
    },2000);
}
function two(){
    setTimeout(function(){alert("delay 2")},1000);
}

The point of setTimeout is that it is asynchronous so it wont block your code from continuing. You have the scope to call the callback from within one's setTimeout function though.

See it working in a fiddle

answered May 18, 2015 at 22:52

jcuenod

58.9k15 gold badges71 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

connorwstein Over a year ago

Thanks that makes sense. I still can't seem to apply it to my google calendar api calls though.

Collectives™ on Stack Overflow

Javascript trouble with callbacks to execute asynchronous calls synchronously

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related