CODEWITHSUNDEEP
javascriptmootools
Sitethief
Sitethief

Reputation: 770

Mootools, how to make an asynchronous each loop

JS Fiddle code

var id = 1;
var lala = new Array(
    'Hello World',
    'This is my new and fancy console!',
    'See how its typing?',
    'Isn\'t that cool ? ',
    'Try it out for yourself!');
lala.each(function (line) {
    id++;
    fullID = 'Div' + id;
    new Element('p', {
        'id': fullID
    }).inject($(document.body));
    texttype(fullID, line, 100, 100);
});

I'm trying to call a method in an MooTools each loop, but the problem is that due to javascripts nature all method calls are called at aprox. the same time. How do I prevent this from happening? Do I need to return something from the method I call? Is there another way? Arbitrary timeouts don't really seem to be a good solution because of timing issues. (Note, this code is in testing stage, so its bogus data and var names)

Upvotes: 0

Views: 159

Answers (1)

MaxArt
MaxArt

Reputation: 22637

In the texttype function there's a fifth argument, which is the callback function that's called after the text is typed:

var doType = function(i) {
    var fullID = 'Div' + (i + 1); // Don't forget var!
    new Element('p', {
        'id': fullID
    }).inject($(document.body));
    texttype(fullID, lala[i], 100, 100, function() {
        doType(i + 1);
    });
}
doType(0);

Upvotes: 1

Related Questions