web-dev-qa-db-fra.com

Exécute la fonction jQuery après la fin d'une autre fonction

Je souhaite exécuter une fonction jQuery personnalisée à la fin d'une autre fonction personnalisée
La première fonction est utilisée pour créer un effet "dactylographique"

function Typer()
{
    var srcText = 'EXAMPLE ';
    var i = 0;
    var result = srcText[i];
    setInterval(function() {
        if(i == srcText.length) {
            clearInterval(this);
            return;
        };
        i++;
        result += srcText[i].replace("\n", "<br />");
        $("#message").html( result);
    },
    100);

}

et la deuxième fonction joue un son

function playBGM()
{
    document.getElementById('bgm').play();
}

J'appelle les fonctions l'une après l'autre comme

Typer();
playBGM();

Mais le son commence à jouer au fur et à mesure que le texte est tapé. Je veux jouer le son seulement APRÈS que la dactylographie soit terminée.

Voici ce que j'ai essayé: http://jsfiddle.net/GkUEN/5/

Comment puis-je réparer cela?

jqueryfunction
37
user2878249

Vous devriez utiliser un paramètre de rappel:

function Typer(callback)
{
    var srcText = 'EXAMPLE ';
    var i = 0;
    var result = srcText[i];
    var interval = setInterval(function() {
        if(i == srcText.length - 1) {
            clearInterval(interval);
            callback();
            return;
        }
        i++;
        result += srcText[i].replace("\n", "<br />");
        $("#message").html(result);
    },
    100);
    return true;


}

function playBGM () {
    alert("Play BGM function");
    $('#bgm').get(0).play();
}

Typer(function () {
    playBGM();
});

// or one-liner: Typer(playBGM);

Ainsi, vous transmettez une fonction en tant que paramètre (callback) qui sera appelée dans ce if avant return.

En outre, this est un bon article sur les rappels.

[~ # ~] jsfiddle [~ # ~]

34
Ionică Bizău

Vous pouvez utiliser le code ci-dessous

$.when( Typer() ).done(function() {
       playBGM();
});
62
Pradeep

Les promesses reportées sont un bon moyen d’enchaîner de manière ordonnée et facile l’exécution de la fonction. Que ce soit AJAX ou des fonctions normales, elles offrent une plus grande souplesse que les rappels, et j’ai trouvé plus facile à comprendre.

function Typer()
{
var dfd = $.Deferred();
    var srcText = 'EXAMPLE ';
    var i = 0;
    var result = srcText[i];

PDATE:

////////////////////////////////

  var timer=    setInterval(function() {
                    if(i == srcText.length) {

    // clearInterval(this);


       clearInterval(timer);

////////////////////////////////


   dfd.resolve();
                        };
                        i++;
                        result += srcText[i].replace("\n", "<br />");
                        $("#message").html( result);
                },
                100);
              return dfd.promise();
            }

J'ai modifié la fonction de lecture afin qu'elle retourne une promesse à la fin de la lecture, ce qui pourrait être utile à certains. La troisième fonction est activée lorsque le son est terminé.

   function playBGM()
    {
      var playsound = $.Deferred();
      $('#bgm')[0].play();
      $("#bgm").on("ended", function() {
         playsound.resolve();
      });
        return playsound.promise();
    }


    function thirdFunction() {
        alert('third function');
    }

Maintenant, appelez le tout avec ce qui suit: (assurez-vous d’utiliser Jquery 1.9.1 ou une version ultérieure, car j’ai constaté que la version 1.7.2 exécute toutes les fonctions en même temps, au lieu d’attendre que chacune d’elles soit résolue.)

Typer().then(playBGM).then(thirdFunction);

Avant aujourd'hui, je n'ai pas eu recours aux promesses différées de cette façon et les ai finalement comprises. Les événements d’interface chaînés, programmés avec précision et exactement au moment voulu, y compris les événements asynchrones, n’ont jamais été aussi faciles. Pour moi au moins, je l’ai maintenant sous contrôle, en grande partie grâce aux questions des autres.

3
hiJump

Vous pouvez également utiliser des événements personnalisés:

function Typer() {
    // Some stuff

    $(anyDomElement).trigger("myCustomEvent");
}


$(anyDomElement).on("myCustomEvent", function() {
    // Some other stuff
});
3
Jerome