jqueryのは、関数のシーケンスは、

Question

私は文字で、テキスト文字列の文字を表示する機能アニマル（）、書いた：

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'); 

私が呼び出す関数アニマル（）は、第2の時間を、それは作業を開始し、最初の動物は（）である一方、ワーキング。一貫して動作させるにはどうすればいいですか？

Answer 1

Animalは結果で非同期Animaを実行し、同時にAnimalの2番目のインスタンスを実行することを可能にするsetTimeoutを呼び出すので、このような方法で動作説明

。

解決策

1つのオプションは、最初が行われたときに実行されなければならない関数へのコールバックだ動物の機能に2つ目のパラメータを追加することです。

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

と実装：

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