CODEWITHSUNDEEP
javascript
user4108694
user4108694

Reputation:

Understanding Callback in Js function

Okay this is a basic question but as someone who has never worked with callback function before (ANYWHERE) and after many failures to understand what's going on, I thought that maybe you can help me.

Let's consider the following example:

When the html loads, the function showtext reveals the, passed as parameter, text by letter (just a tiny and beautiful animation). When this function finish, when all the sentence is shown, I want to call another function showAuthor that reveals the author of the above post.

function showText(target, message, index, interval, callback) {
    if (index < message.length) {
        $(target).append(message[index++]);
        setTimeout(function() { showText(target, message, index, interval); }, interval);
    }
    if (callback && typeof(callback) === "function") {
        callback();
    }

}

function showAuthor() {
    var name = '<span>as posted by someone</span>';
    $(name).hide().appendTo(".author").fadeIn(300);
}

$(function() {
    showText("#aboutMeMsg", "Some VERY cool text here", 0, 100, showAuthor());
});

The problem

The problem with the above code is that the function showAuthor is executed the same time when the function showtext is starting. That means that the showAuthor is able to complete before showText is completed.

I think the problem is that I use the function showText is recursive, but I can't solve the problem.

Now why is this happening, I can't get it....

Upvotes: 0

Views: 61

Answers (3)

Redu
Redu

Reputation: 26201

First you should correct the callback passing as indicated in the previous answers. So it should be like ;

$(function() {
    showText("#aboutMeMsg", "Some VERY cool text here", 0, 100, showAuthor);
});

Yet, in the showText function when you make a call to your callback it executes synchronously and this is the problem. You should send your callback to the end of the event queue so that it runs after the showText function. You may try changing the following line 

if (callback && typeof(callback) === "function") {
  callback();
}

to

if (callback && typeof(callback) === "function") {
  setTimeout(callback,0);
}

Upvotes: 0

Ravi Tiwari
Ravi Tiwari

Reputation: 962

Hope this will help 

    function showText(target, message, index, interval, callback) {
      if (index < message.length) {
        $(target).append(message[index++]);
        setTimeout(function() { showText(target, message, index, interval, callback); }, interval);
      } else if (callback && typeof(callback) === "function") {
        callback();
      }
    }

    function showAuthor() {
      var name = '<span>as posted by someone</span>';
      $(name).hide().appendTo(".author").fadeIn(300);
    }

    $(function() {
      showText("#aboutMeMsg", "Some VERY cool text here", 0, 100, showAuthor);
    });

You actually need to pass a callback function reference showAuthor in the showText function, rather than the invoking it showAuthor().

Upvotes: 0

MohamedSanaulla
MohamedSanaulla

Reputation: 6252

You need to pass the showAuthor without the brackets. Because using the brackets means you are invoking that function. Something like below:

$(function() {
    showText("#aboutMeMsg", "Some VERY cool text here", 0, 100, showAuthor);
});

And then you need to pass the same callback when you are recursively invoking the showText function

Edit:

setTimeout(function() { showText(target, message, index, interval, callback); }, interval);

Upvotes: 1

Related Questions