Adding callback to javascript while loop

Question

I am trying to replicate a type-writer effect on a resume page of mine, and have if working except for one part:

while (i < tags.length) {
    type(tags[i], content[i], 0, 50);
    i++;
}

This is the function that writes out the lines, and it works correctly, except for the fact that it writes all of the lines at once. I would like for it to write a single line, then move on to the next, and so on and so forth. I know the solution lies in adding a callback function in but I can't seem to get it to work right. Any help/advice would be appreciated. Thanks!

Also, here is the full jsfiddle.

adeneo · Accepted Answer · 2015-04-18 16:07:00Z

5

A callback and a recursive function seems like the way to go

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

var i = 0;

(function recursive() {
    if (i < tags.length) {
        type(tags[i], content[i], 0, 50, recursive);
        i++;
    }
})();

FIDDLE

answered Apr 18, 2015 at 16:07

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

6 Comments

Garrett Over a year ago

That is pretty awesome, does exactly what I want. Thanks for the quick response. Where is a good spot to views some docs on the setTimeout idea?

Yellen Over a year ago

This is pretty neat. But I don't like the outcome, personally. One has to wait and see all the content load.

adeneo Over a year ago

MDN generally has good documentation on JavaScript.

adeneo Over a year ago

@yellen - that's what the OP asked for, and in some cases it can be neat, as long as one knows that the visitor will sit around and wait for it I suppose.

Yellen Over a year ago

@adeneo - Sorry, was not targeted to your solution. :P

|

Collectives™ on Stack Overflow

Adding callback to javascript while loop

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related