jquery函数序列

Question

我编写了函数Animal（），它逐个字符地显示文本字符串：

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

当我第二次调用函数Animal（）时，它开始工作，而第一个Animal（）正在工作。如何让它始终如一？

Answer 1

解释

它以这种方式工作，因为Animal调用setTimeout，结果异步运行Anima，并且可以同时运行Animal的第二个实例。

可能的解决方案

一个选项是向Animal函数添加第二个参数，该函数是第一个完成时应该运行的回调函数。

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