Executing one function after the other in Javascript

Question

I'm having the hardest time wrapping my head around javascript callbacks for some reason and it's causing me a lot of headaches. I have three functions that I'm trying to use to parse some data from a website like so—

function parseText() {
    //this finds a bunch of DOM elements, grabs the innerHTML from each and stores
    //it in an array
}

function scrollToTop() {
    //this scrolls to the top of the window where I'm getting text from,
    //which causes the window to load more DOM elements to parse
}

function removeOldElements() {
    //this removes the already-parsed DOM elements from the DOM
}

and I've been calling it like this.. which I now realise is a completely horrid method of doing things because as soon as I switch tabs Chrome completely messes with setTimeout and setInterval timings and causes a lot of errors..

function doEverything() {
    parseText();
    setTimeout(scrollToTop, 2000);
    setTimeout(removeOldElements, 4000);
}

setInterval(doEverything, 5000); 
//this loops it every 5 seconds so I can just run it in a separate tab
//while I continue to work on other things

This works kind of.. but any pause or interruption in setInterval breaks the code, and I know I should be using callbacks for this kind of thing in order to call one once the first one is done executing, but I just can't seem to get it to work.

I've been reading about callbacks and don't really understand what the format is supposed to be.. I've tried something like this:

function parseText(callback) {
}

function scrollToTop(callback) {
}

function removeOldElements() {
}

function doEverything() {
    parseText(
        scrollToTop(
            removeOldElements
        )
    )
}

setInterval(doEverything, 5000);

But this only seems to be calling scrollToTop and then parseText twice.. and doesn't call the third function at all! What the heck! Now I'm really confused..

Could anyone assist? I'm sure I'm doing something very basic completely wrong here..

Answer 1

You're talking about callbacks, but I don't see anything explicitly async about your code. You need to differentiate between two things here:

1. Synchronous function calls: where the main thread executes the whole function block and never returns control until it's all finished executing. You don't need a callback for this sort of thing, you just call your function in-line.

// some code func() // some more code `

2. Asynchronous functions, which need some time to execute. In order not to block the main thread (usually the UI thread itself), the code is deferred till some time later when the engine can spare some processing cycles. This is where you need callbacks. It looks like this:

// some code async_func(callback_func) // some more code

There is no guarantee that all the code inside async_func will execute before some more code is. In fact, it will most probably execute later.

From the names of your functions, it doesn't look like any of them is doing any actual async work. So you can just call them like so:

function doEverything() {
    parseText()
    scrollToTop()
    removeOldElements()
}

In addition, you forgot the parentheses for the last function call removeoldElements(), that's why it didn't execute.

Answer 2

Callback is good choice, this example may guide you further.

function one(fn) {
  console.debug('one...');
  setTimeout(fn, 1000);
}

function two(fn) {
  console.debug('two...');
  setTimeout(fn, 1000);
}

function three(fn) {
  console.debug('three...');
  setTimeout(fn, 1000);
}

function loop() {
  console.debug('loop...');
  setTimeout(function() {
    one(function() {
      two(function() {
        three(loop);
      });
    });
  }, 1000);
}

setTimeout(loop, 1000);

Open browser console, for logs.

Answer 3

I'm not sure what you are trying to do, but I suggest to you doing this:

function parseText(callback) {
        //some code here
        console.log("parsetext");
        scrollToTop('callback');
}

function scrollToTop(callback) {
        //some code here
        console.log("scrollToTop");
        removeOldElements();
}

function removeOldElements() {
        //some code here
        console.log("removeOldElements");
        setTimeout(parseText, 5000);
}

ingparseText();