Comment ajouter un rappel à cette fonction?

Question

Salut là je found this snippet qui simule l'effet de la machine de frappe:

$.fn.teletype = function(opts){ 
    var $this = this, 
     defaults = { 
      animDelay: 50 
     }, 
     settings = $.extend(defaults, opts); 

    $.each(settings.text.split(''), function(i, letter){ 
     setTimeout(function(){ 
      $this.html($this.html() + letter); 
     }, settings.animDelay * i); 
    }); 
}; 

Wich semble fonctionner à merveille, mais je dois savoir quand la fonction est terminée, j'ai essayé d'ajouter un autre paramètre et l'exécuter à la fin de celui-ci :

$.fn.teletype = function(opts,callback){ 
    var $this = this, 
     defaults = { 
      animDelay: 50 
     }, 
     settings = $.extend(defaults, opts); 

    $.each(settings.text.split(''), function(i, letter){ 
     setTimeout(function(){ 
      $this.html($this.html() + letter); 
     }, settings.animDelay * i 
     callback(); 
    }); 
}; 

Mais son exécution avant la proccess terminé

Comment puis-je savoir où placer cette fonction de rappel?

Answer 1

Appel pour le dernier élément de la each, ce appellera le rappel après que l'animation a été appliquée à chaque lettre

$.fn.teletype = function(opts,callback){ 
    var $this = this, 
     defaults = { 
      animDelay: 50 
     }, 
     settings = $.extend(defaults, opts); 


    $.each(settings.text.split(''), function(i, letter){ 
     setTimeout(function(){ 
      $this.html($this.html() + letter); 
      if(i === (settings.text.length -1)) { 
       callback(); 
      } 
     }, settings.animDelay * i 
    }); 

}; 

Answer 2

Vérifiez l'état à l'intérieur du rappel setTimeout:

$.each(settings.text.split(''), function(i, letter){ 
    setTimeout(function(i){ 
     $this.html($this.html() + letter); 
     if(i == (settings.text.length -1)){ 

      callback() 

     } 
    }, settings.animDelay * i 

});