web-dev-qa-db-fra.com

Exécuter la fonction après une autre complète

function1 = function(){

  something.on('transitionend', function(){
    // now function2 should run
  });

}

function2 = function(){
  alert('ok');
}

function1();
function2();

J'ai donc entendu parler des promesses de jQuery. Je renverrais un objet "différé" et, dans le gestionnaire d'événements, j'appellerais différé.resolve ();

Mais qu’arrivera-t-il si j’ai plusieurs gestionnaires d’événements là-bas et si je veux que la fonction suivante ne soit exécutée que lorsque tous ont été congédiés? .

Existe-t-il un autre moyen de détecter si la fonction1 a terminé tout son travail?

javascriptjqueryjquery-pluginsjavascript-eventsjquery-deferred
5
thelolcat

Essaye ça,

 $.when($.ajax(fuction1())).then(function () {

    fuction2;

});

Ici, fuction1 est votre première fonction à appeler et fuction2, votre deuxième fonction.

11
Jinesh

Soit vous prenez l'approche de promesse, soit vous prenez l'approche de rappel.

Avec les rappels, vous passeriez function2 en tant que paramètre à function1;

function1 = function(callback){

  something.on('transitionend', function(){
      callback();
  });

}

function2 = function(){
  alert('ok');
}

function1(function2);

... mais alors vous êtes imbriqué si vous avez function3 dépendant de function2 et function4 dépendant de 3.

C'est pourquoi vous emprunterez la voie différée.

function1 = function(){
  var def = new jQuery.Deferred();

  something.on('transitionend', function(){
      def.resolve(arguments);
  });

  return def.promise();
}

function2 = function(){
  alert('ok');
}

function1().done(function2);

... ce qui vous permettrait d'enchaîner des fonctions successives plutôt que de les imbriquer (à condition qu'elles aient toutes rendu des promesses, bien sûr).

La combinaison des gestionnaires d'événements et des programmes différés est un peu compliquée. Donc, si vous aviez plusieurs gestionnaires d'événements, vous finirez par devoir faire quelque chose de boiteux, tel que;

function1 = function(){
  var def = new jQuery.Deferred();
  var wait = 4;

  function maybeFire() {
      if (--wait) {
          def.resolve();
      }
  }

  something.on('transitionend', maybeFire);
  something.on('somethingelse', maybeFire);
  something.on('somethingelse', maybeFire);
  something.on('somethingelse', maybeFire);

  return def.promise();
}

function2 = function(){
  alert('ok');
}

function1().done(function2);

La manière real de combiner plusieurs différés consiste à utiliser $.when() , mais malheureusement, vous ne disposez pas de plusieurs différés, et leur ajout sera aussi compliqué que d'utiliser l'approche maybeFire.

5
Matt

Remarque: L'événement transitionend peut se déclencher plusieurs fois si all est défini dans la valeur csstransition.

Essayer (ce modèle)

c'est-à-dire

html

<button>click</button>

css

button {
    width: 100px;
    -webkit-transition: width 1s;
}
.transition {
    width: 150px
}

js

$(function() {
    // `$.Callbacks("once")` to fire `alert` once ,
    // even if `all` set within `css` `transition` 
    // property value
    var callbacks = $.Callbacks(); 

    function2 = function(j) {
      alert(j);
    };

    callbacks.add(function2);

    $(window).on("transitionComplete", function(e, i) {
     // function2(i);
        callbacks.fireWith($(this), [i]);
    });
    // `webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd`
    function1 = function() {
      $("button").on('transitionend', function (e) {
        $(window).trigger("transitionComplete", ["ok"]);
      });
    };

    function1();

    $("button").on("click", function(e) {
      $(this).toggleClass("transition");
    });

});

jsfiddle http://jsfiddle.net/guest271314/u7B9K/

1
guest271314