2013-04-08 6 views
8
$("#div1, #div2").fadeIn('500',function(){ 
    { 
     console.log('Test'); 
    } 
}); 

Fiddle hier: http://jsfiddle.net/y97h9/Wie führe ich die Funktion einmal aus?

Der obige Code wird 'Test' zweimal in der Konsole aus. Wie kann ich es nur einmal drucken lassen? Ist es möglich?

+0

Was außer Sie? wenn div2 nicht existiert? Test oder nein Test in der Konsole? –

+0

Setzen Sie einen Boolean außerhalb des Checks, schalten Sie ihn innerhalb des Checks um. – Shark

+5

Sie haben die Funktion für zwei verschiedene DOM-Elemente aufgerufen. Es ist normal, dass die Funktion zweimal aufgerufen wird. Was hast du sonst noch erwartet? –

Antwort

27

Sicher, können Sie jQuery promise verwenden, um mehrere Rückrufe Problem zu lösen:

$("#div1, #div2").fadeIn('500').promise().done(function() 
{ 
    console.log('Test'); 
}); 

Die .promise() -Methode eine dynamisch generierte Versprechen zurückgibt, die einmal verpflichtet, alle Aktionen eines bestimmten Typs gelöst ist, die Sammlung, in der Warteschlange oder nicht, haben

beendet

Working Demo

+0

Das ist glatt ... +1. – jmar777

+0

+1 für Eleganz – Ejaz

+0

Was passiert, wenn '# div1' oder' # div2' neben dem 'fadeIn' bereits Animationen enthalten? Wird es nicht zu lange warten (möglicherweise)? Vielleicht bin ich Missverständnis – Ian

3

Der Rückruf wird für jedes übereinstimmende Element einmal ausgeführt. Sie können immer ein Flag gesetzt, um zu sehen, ob es bereits obwohl ausgeführt worden ist:

var hasRun = false; 
$("#div1, #div2").fadeIn('500', function() { 
    if (hasRun) return; 
    console.log('Test'); 
    hasRun = true; 
}); 
+0

Sehr hässlich. Dies ist ein [gut gelöstes Problem] (http: //api.jquery.com/promise /) in JavaScript und jQuery, und das ist nicht die zu verwendende Lösung. – meagar

+0

@meagar Ich sehe nicht, wie "Versprechen" das lösen kann ... und diese Antwort ist alles andere als "hässlich". Es ist genau richtig. – Ian

+3

@meagar Es ist nicht besonders clever, aber es ist geradlinig und wird nicht von einigen der subtilen Probleme leiden, die in der Antwort von user1479606 diskutiert werden. Ich bevorzuge jedoch seine Antwort gegenüber meiner, wenn Sie nicht gleichzeitig andere Animationen im Spiel haben. Ian, danke :) – jmar777

-1

ein boolesches Flag Verwenden console.log (‚Test‘) zu verhindern; von zweimal aufgerufen werden.

var isCalled = false; 
$("#div1, #div2").fadeIn('500',function(){ 
    if(!isCalled) { 
     isCalled = true; 
     console.log('Test'); 
    } 
});