La fonction exécuter l'un après l'autre complète

function1 = function(){

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

}

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

function1();
function2();

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

Mais qu'advient-il si j'ai plusieurs gestionnaires d'événements là et je ne veux que la prochaine fonction à exécuter lorsque tous ont été tirés?
+ Je n'aime pas l'idée d'introduire quelque chose étrangère comme le "différé", dans d'autres parties du code.

Est-il un autre moyen de détecter si fonction1 a fini tout son travail?

Passer function2 comme un argument de function1 et à l'appeler à l'intérieur de la fonction de rappel pour .on. Comme dans: function1(function2); Et puis: function1 = function(callback){ something.on('transitionend', callback); }
Voir jsfiddle.net/rGECn/2

OriginalL'auteur thelolcat | 2014-08-05

  1. 12

    Essayer cela,

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

    fuction2;

});

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

    Pour ce que ça vaut, j'ai essayé en utilisant cela et cela a provoqué ma page se recharge .. dans mon cas, signifiait 3 appels à l'api geolocator
    Cela fonctionne réellement!

    OriginalL'auteur Jinesh

  2. 5

    Soit vous prenez la promesse approche, ou vous prenez le rappel de l'approche.

    Avec rappels, vous auriez du passer function2 en tant que paramètre à function1;

    function1 = function(callback){

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

}

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

function1(function2);

    ... mais alors vous obtenez imbriqués l'enfer si vous avez function3 dépend de function2, et function4 personne à charge sur 3.

    C'est pourquoi vous iriez vers le bas le report de la route;

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

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

  return def.promise();
}

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

function1().done(function2);

    ... qui vous permettra de chaîne successifs des fonctions plutôt que de nidification (à condition qu'elles en sont toutes retournées promesses, bien sûr).

    Combinant les gestionnaires d'événements et deferreds est un peu brouillon. Donc, si vous êtes allé en bas de la route de la multiplicité de gestionnaires d'événements, vous finirais par avoir à faire quelque chose de boiteux comme;

    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 réel combinant de manière plusieurs deferreds est par l'utilisation de $.lorsque(), mais malheureusement, ici vous n'avez pas plusieurs deferreds, et en les ajoutant sera aussi bordélique que l'aide de la maybeFire approche.

    OriginalL'auteur Matt

  3. 1

    Note, transitionend événement peut être déclenché plusieurs fois si all est situé dans css transition la valeur de la propriété

    Essayer (ce modèle)

    je.e.g.,

    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/

    OriginalL'auteur guest271314