0

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....

Improve this question
4
  • you try to pass the callback invoked hence in fact you are not passing the showAuthor function as a callback but it's return value as a parameter to the showText function. (probably as "undefined") Commented Apr 26, 2016 at 10:33
  • @Redu yes but I didn't get any errors on firebug console Commented Apr 26, 2016 at 10:41
  • you don't get any errors because there are no errors as per the vm is concerned. It's about semantics. You are passing the return value of the showAuthor function to showText function which is probably "undefined" and in the showText function you check the callback parameter with if (callback && typeof(callback) === "function") {callback();} and it just evaluates to false. You should pass showAuthor function's definition as indicated in the given answers. I mean without the invoking parens. Commented Apr 26, 2016 at 10:47
  • 1
    Be aware even once you get the callback working, it won't have the effect you describe, as it will be called after the first call to showText(). Commented Apr 26, 2016 at 10:48

3 Answers 3

Reset to default
1

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);
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

can you explain using my example what the invoking that function means? It didn't worked as expected
@GeorgeGkas setTimeout(function() { showText(target, message, index, interval, callback); }, interval);
0

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().

Improve this answer

1 Comment

yes you are right about the else statement. I hate logical faults. You just have to add the callback parameter also in the recursively invoking showText function. Edit it and I'll accept you.
0

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);
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.