6

*注：質問の書き直し：

個々の関数呼び出しの外に次のように書き込もうとしています。

例：

関数f1（）{
    何かをする1
}
関数f2（）{
    何かをする2   
}

関数1を実行します
それが終わったら
関数2を実行します

（jsfiddlesについては以下のコメントを参照してください）

問題は、ボックスが同時にロードされることです。動作は、赤でロードし、完了したら緑でロードする必要があります。

これがjQueryの一般的な方法ではない場合は、私に知らせてください。おそらく私は幽霊を追いかけているだけです...

4

6 に答える 6

14

機能により異なります。

簡潔な答え：

同期関数の場合: 1 つずつ呼び出すだけです。

非同期関数の場合: 何が非同期になるかによって異なります。

jQueryアニメーション? アニメーションのメソッドまたは fx キューの Promise オブジェクトからコールバック パラメータを定義します。

setTimeout/setInterval/何か他のもの? ほとんどの場合、コールバックまたは Deferred/Promise オブジェクトを提供するために関数を書き直す必要があります。

例については、thisまたはthisを参照してください。

長い答え:

コメントの jsFiddles によると、次の 2 つの関数があります。

function firstFunction(){
    $(".one").fadeIn(1000).delay(2000).fadeOut();
}
function secondFunction(){
    $(".two").fadeIn(1000).delay(2000).fadeOut();
}

secondFunctionの後に実行したいfirstFunctionが、これらの関数を改ざんしたくない場合。その場合、考えられる解決策は 1 つだけです。アニメーション化されている要素からPromise オブジェクトを取得し、成功ハンドラーとして定義します。firstFunctionsecondFunction

firstFunction();
$('.one').promise().then(secondFunction);

jsフィドル

promise()その要素の現在のアニメーション状態にバインドされた Promise オブジェクトを返します。は基本的に、「現在のアニメーションが終了$('.one').promise().then(secondFunction)したら実行することを約束します。secondFunction.one

既存の関数を改ざんする場合は、 withinsecondFunctionのコールバック パラメータとして呼び出すこともできますが、これはあまり洗練された解決策ではありません。fadeOutfirstFunction

関数を書き直す場合、理想的な解決策は、Deferred と Promises を使用して非同期関数を調整することです。簡単な入門書は次のとおりです。

  • jQuery では、Deferredオブジェクトは、関数の成功/失敗状態を定義するために使用できる特別なオブジェクトです。関数内でこれを使用します。
  • Promiseオブジェクトは、これらの成功/失敗状態にコールバックを追加するために使用できる特別なオブジェクトです。関数の外でこれを使用します。

これらのツールを使用すると、いつ「完了」したかを指定するように関数を書き直すことができます。また、関数の外部のコードに、いつ完了したか (および実行後に実行するか) を認識できるようにすることができます。

Deferred と Promise を使用するように書き直すと、コードは次のようになります。

function firstFunction(){
    var deferred = $.Deferred();
    $(".one").fadeIn(1000).delay(2000).fadeOut(function() {
        deferred.resolve();
    });
    return deferred.promise();
}
function secondFunction(){
    var deferred = $.Deferred();
    $(".two").fadeIn(1000).delay(2000).fadeOut(function() {
        deferred.resolve();
    });
    return deferred.promise();
}

firstFunction().then(secondFunction);

jsフィドル

すべての関数がこのように記述されている場合、それらの実行順序を制御し、 を使用して順次実行することができますthen()。より完全な例を次に示します。

function one(){
    var deferred = $.Deferred();
    $(".one").fadeOut(500, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function two(){
    var deferred = $.Deferred();
    $(".two").fadeOut(1500, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function three(){
    var deferred = $.Deferred();
    $(".three").fadeOut(1000, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function four(){
    var deferred = $.Deferred();
    $(".four").fadeOut(750, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function five(){
    var deferred = $.Deferred();
    $(".five").fadeOut(600, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

one()
    .then(two)
    .then(three)
    .then(four)
    .then(five);

jsフィドル

于 2013-01-20T10:57:37.503 に答える
6

Deferred はオプションです。いつでも次のことができます。

$.when(firstFunction()).then(secondFunction);

唯一の秘訣は、firstFunction 内で次のことを行う必要があることです。

function firstFunction(){
    var deferred = $.Deffered();

    $.get(url,function(r){
        deferred.resolve();
    });

    return deferred;
}

when 関数は、firstFunction 呼び出しによって返された deferred が解決されるまで待機します。遅延が解決されると (ajax 成功コールバックで)、'.then' ステートメントが起動し、secondFunction が呼び出されます。

jQuery のドキュメントでは、Deferred API について非常によく説明されています。

于 2013-01-20T02:22:28.530 に答える
4

最初の関数の最後に2番目の関数を呼び出すだけです。

 $(document).ready(function() {

  function firstFunction(){
    alert("this is the first function!");
    secondFunction();
  }
  function secondFunction(){
    alert("this is the second function!");
  }

  firstFunction();
});

フィドル

または、最初の関数を呼び出すたびに2番目の関数を呼び出したくない場合は、単純に順番に呼び出すことができます。

firstFunction();
secondFunction();

これは、フィドルfirstFunctionに移る前に完了するまで待機するため、機能しますsecondFunction

于 2013-01-19T07:14:18.353 に答える
4

v1.7upから、jquery Callbacks関数を使用できます

var callbacks = $.Callbacks();
callbacks.add( firstFunction );
callbacks.add( secondFunction );
callbacks.fire( );
于 2013-01-19T07:29:20.127 に答える
1

それ以外の

 firstFunction(function(){
        secondFunction();
    });

書きます

firstFunction();
secondFunction();
于 2013-01-19T07:14:03.970 に答える