Problem in basic example of Callbacks in Javascript

Question

The HTML file has a empty body.

This is the first code without editing anything

const posts = [
    { title: 'Post One', body: 'This is post one'},
    { title: 'Post two', body: 'This is post two'}
];

function getPosts(){
    setTimeout(()=>{
        let output = '';
        posts.forEach((post,index) => {
            output += `<li>${post.title}</li>`;
        });
        document.body.innerHTML = output;
    },1000);
}

function createPost(post){
    setTimeout(()=>{
        posts.push(post);
    }, 2000);
}

getPosts()

createPosts({title:'Post three', body:'This is post three'});

The output we get is

Post One
Post two

We are not seeing 'Post Three' as expected.

Now we will pass getPosts function as an argument to the createPost function

const posts = [
    { title: 'Post One', body: 'This is post one'},
    { title: 'Post two', body: 'This is post two'}
];

function getPosts(){
    setTimeout(()=>{
        let output = '';
        posts.forEach((post,index) => {
            output += `<li>${post.title}</li>`;
        });
        document.body.innerHTML = output;
    },1000);
}

function createPost(post,callback){
    setTimeout(()=>{
        posts.push(post);
        callback();
    }, 2000);
}

createPosts({title:'Post three', body:'This is post three'},getPosts);

Now the output is completely blank. Even Post One and Post Two is not added to DOM let alone Post Three which we expected in this case

Where am I going wrong?

hint: use the browsers developer tools console to debug your code — Jaromanda X
– Jaromanda X, Commented Sep 15, 2019 at 2:51
@JaromandaX Sure, Henceforth I will make it a point to wander around there too. — KshitijV97
– KshitijV97, Commented Sep 15, 2019 at 2:52

skovy · Accepted Answer · 2019-09-15 02:36:09Z

1

You're defining the method createPost but calling createPosts.

const posts = [{
    title: 'Post One',
    body: 'This is post one'
  },
  {
    title: 'Post two',
    body: 'This is post two'
  }
];

function getPosts() {
  setTimeout(() => {
    let output = '';
    posts.forEach((post, index) => {
      output += `<li>${post.title}</li>`;
    });
    document.body.innerHTML = output;
  }, 1000);
}

function createPost(post, callback) {
  setTimeout(() => {
    posts.push(post);
    callback();
  }, 2000);
}

createPost({
  title: 'Post three',
  body: 'This is post three'
}, getPosts);

answered Sep 15, 2019 at 2:36

skovy

5,6502 gold badges23 silver badges34 bronze badges

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

1 Comment

KshitijV97 Over a year ago

That was a dumb mistake. Thanks. By the way which extension or IDE did you use which formatted the code like this?

user12036066 · Accepted Answer · 2019-09-15 02:45:53Z

1

When I was writing an answer, saw that someone replied already.

Just wanted to mention that while in the 2nd case you should get what you want, typo is a devil, the first case is clearly a wrong way of doing what you wanted.

setTimeout with a second evidently will work out faster that the same setTimeout with 2 seconds.

answered Sep 15, 2019 at 2:45

user12036066

1 Comment

KshitijV97 Over a year ago

I was just revisiting callbacks, promises, async, await by trying basic examples from some tutorials after not touching JS for quite some while and this happened. Anyway, Thanks!

Collectives™ on Stack Overflow

Problem in basic example of Callbacks in Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related