How to run Asynchronous Javascript Functions in order

Question

Hi I am a beginner programmer and I need to run several javascript functions in an order on a page; getcampaignID(), search1(), searchresult(), search2(), searchresult(). I need to retrieve the campaign ID first to send it over to search1(), get the result, then running search2() to get its result next.
I have successfully ran [search1() + searchresult()] before [search2() + searchresult()] by executing the search1() after the </body> tag and adding a setTimeout in searchresult(). However, I am unable to run getcampaignID first without breaking search1() and search2()

My code looks like this: home.html

<script>
getcampaignID() {
    //...make AJAX call to get campaignID
    campaignID = xmlhttp.responseText.trim();
}
getcampaignID(); //run function

searchresult() {
        //...retrieves search results
        //...appends to html div

        setTimeout(function () {
            if (counter == 0) {
                counter = 1;
                search2();
            } else {
                clearTimeout(timer);
            }
        }, 500);
    } //end of searchresults

search1() {
    //...search1 parameters 
    //url=?camid = campaignID
    //campaignID unidentified
}

search2() {
    //...search2 parameters 
    //url=?camid = campaignID
    //campaignID unidentified
}


</script>
<body>
<div id= results1>...</div>
<div id= results2>...</div>
</body>
<script>
         search1();
</script>

Things I have tried:

        getcampaignID() {
            //... all the codes mentioned
            search1() {
                alert("search1 working");
            }
            search2() {
                alert("search2 working");
            }
        }
        search1();

Problem: search1() won't run, no alerts fired.

getcampaignID() {
    var campaignid = "A";
    big(campaignid);
}
big
function (campaignid) {

    //..all codes
    search1() {
        alert("search1 working");
    }
    search2() {
        alert("search2 working");
    }
    search1();
}
search1();

Problem: search1() won't run, no alerts fired.

Summary:
I am looking for a way to add campaignID value in search1(); before search1 runs

Being custom functions you can give them arguments. Where you declared function search1(){...} and in the round brackets an argument function search1(ID){...};. When you run it just do search1(campaignid); and it will pass the argument as ID and you can use it in your function. — yomisimie
– yomisimie, Commented Dec 5, 2016 at 15:24
hey, the code is filled with ebay api terms so I try my best not to use them! I just tried out the editions search1(campaign){...} and search1(campaignid); and it didn't work I think it's because the function is ran even before I get campaignID from my Ajax call — Detective merry
– Detective merry, Commented Dec 5, 2016 at 15:57

ZedXter · Accepted Answer · 2016-12-05 15:25:59Z

2

What you need is ES6 Promises. Using Promises you could chain them using .then() method and run them one after another and handle results in chain.

Using promises you could write something like

Promise.resolve().then(
    search1();
).then(
    doSomethingWithResults(results);
).then(
    // ....
);

You could find a good introduction to Promises here: https://davidwalsh.name/promises

answered Dec 5, 2016 at 15:25

ZedXter

1631 silver badge6 bronze badges

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

1 Comment

SethWhite Over a year ago

And for compatibility across browsers, use a Promise polyfill/library, like github.com/petkaantonov/bluebird bluebird or q.

BubbleHulk · Accepted Answer · 2016-12-05 16:19:02Z

You can achieve what you are asking with Promises. They can take a little bit of getting used to, but once you get the hand of it, it makes the asynchronous control flow you are having issues with really simple.

If you used a library to perform your AJAX requests, that returned a Promise itself like Fetch, you could write your code like this:

//Fetch will return a promise the resolves with a value of your campaign ID
fetch('http://endpoint.com/campaign')
    .then(campaignId => {
        //You can pass that ID to each of your searches. 
        //Promise.all will resolve with an array containing results from each function you passed in, in that order.
        return Promise.all([search1(campaignId), search2(campaignId)]);
    })
    .then(results => {
        //Search 1 was the first promise we passed to Promise.all
        let search1Results = results[0];
        //Search 2 was the second promise we passed to Promise.all
        let search2Results = results[1];

        //process the results
    });

campino2k · Accepted Answer · 2016-12-05 15:25:26Z

0

So there are some possibilities:

Nest the functions. Run search2() inside the callback of search1().
Use jQuery and .defer();
Learn about promises and do same as 2. but without jQuery :)

answered Dec 5, 2016 at 15:25

campino2k

1,6691 gold badge14 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to run Asynchronous Javascript Functions in order

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related