webentwicklung-frage-antwort-db.com.de

Funktion ausführen, nachdem eine andere abgeschlossen ist

function1 = function(){

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

}

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

function1();
function2();

Also hörte ich von jQuery Versprechen. Ich würde ein "verzögertes" Objekt zurückgeben, und in der Ereignisbehandlungsroutine würde ich deferred.resolve () aufrufen.

Aber was passiert, wenn ich mehrere Event-Handler dort habe und ich nur möchte, dass die nächste Funktion ausgeführt wird, wenn alle ausgelöst wurden? + Ich mag es nicht, etwas Fremdes wie "verzögert" in andere Teile des Codes einzuführen .

Gibt es eine andere Möglichkeit, festzustellen, ob function1 seine Arbeit beendet hat?

javascriptjqueryjquery-pluginsjavascript-eventsjquery-deferred
5
thelolcat

Versuche dies,

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

    fuction2;

});

Hier ist fuction1 Ihre erste aufzurufende Funktion und fuction2 Ihre zweite Funktion.

11
Jinesh

Entweder Sie nehmen den Versprechungsansatz oder den Callback-Ansatz.

Bei Rückrufen würden Sie function2 als Parameter an function1 übergeben.

function1 = function(callback){

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

}

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

function1(function2);

... aber dann bekommen Sie verschachtelt, wenn Sie function3 abhängig von function2 haben und function4 von 3 abhängig sind.

Deshalb gehen Sie die verschobene Route entlang.

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

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

  return def.promise();
}

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

function1().done(function2);

... was es Ihnen ermöglicht, aufeinanderfolgende Funktionen zu verketten, anstatt sie zu verschachteln (vorausgesetzt, sie geben natürlich alle Versprechen zurück).

Event-Handler und Verzögerungen zu kombinieren ist etwas chaotisch. Wenn Sie also die Möglichkeit hatten, mehrere Event-Handler zu verwenden, müssen Sie am Ende etwas Lahmes tun, z.

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

Die real - Methode zum Kombinieren von multiple - Verschiebung ist die Verwendung von $.when() , aber hier haben Sie leider keine mehreren Verschiebung, und das Hinzufügen von Verschiebungen ist genauso unordentlich wie die Verwendung des maybeFire-Ansatzes.

5
Matt

Beachten Sie, dass das transitionend-Ereignis möglicherweise mehrmals ausgelöst wird, wenn all im csstransition-Eigenschaftswert festgelegt ist

Versuchen Sie (dieses Muster)

d.h.

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