jquery the functions sequence

Question

I wrote the function Animal(), which displays text strings character by character:

var j=0;//counter derived fields 
var flag= -1;//Animal() performance indicator

function Animal(string) {
    flag=1;
    console.log('flag start:', flag );
    var a = ''; //The variable which will be entered character by character string
    var i= 0;
    var p = document.createElement('p');
    $('body').append(p);

    Anima();

    flag=0;
    console.log('flag end: ', flag);    
    //
    //
    function Anima() {  
        console.log('string start: ', j);
        a=a+string[i];
        i++;
        $('p:eq('+j+')').text(a);
        var timer = setTimeout(Anima, 100);
        if(i==string.length){
            clearTimeout(timer);
            j++;
            console.log('end: ', j);

        };
    };

Animal('dfkjdghksjdfhglksd');
Animal('11111111');

When I call function Animal() second time, it starts working, while first Animal() is working. How to make it works consistently?

yes, and if u can help, i need to do it by using a function which will go over the array of strings array={'string_1','string_2','string_3'} — mayst
– mayst, Commented Dec 11, 2016 at 1:30

gsc · Accepted Answer · 2016-12-10 21:32:58Z

1

Explanation

It works in such way because Animal calls setTimeout which in result runs Anima asynchronously and makes it possible to run second instance of Animal concurrently.

Possible solution

One option is to add a second parameter to the Animal function that's a callback to function that should be run when the first is done.

Animal('dfkjdghksjdfhglksd', function () {
  Animal('11111111');
});

And implementation:

function Animal(string, callback) {
  flag=1;
  console.log('flag start:', flag );
  var a = ''; //The variable which will be entered character by character string
  var i= 0;
  var p = document.createElement('p');
  $('body').append(p);

  Anima();

  flag=0;
  console.log('flag end: ', flag);    
  //
  //
  function Anima() {  
    console.log('string start: ', j);
    a=a+string[i];
    i++;
    $('p:eq('+j+')').text(a);
    var timer = setTimeout(Anima, 100);
    if (i==string.length) {
      clearTimeout(timer);
      j++;
      console.log('end: ', j);
      callback(); // here we run next Animal()
    }
  }
}

answered Dec 10, 2016 at 21:32

gsc

1,5491 gold badge14 silver badges17 bronze badges

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

1 Comment

mayst Over a year ago

o-o-okay, yes it helps. Thank u! But what if i need to display an array of strings, like array = [ 'ssssss', 'AAAAA', '11111' ]; so, i need to loop it in another function. but how 2 make it with a callback func?

Collectives™ on Stack Overflow

jquery the functions sequence

1 Answer 1

Explanation

Possible solution

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Explanation

Possible solution

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related