web-dev-qa-db-ja.com

別の関数が完了した後にjQuery関数を実行する

別のカスタム関数が完了した後にカスタムjQuery関数を実行したい
最初の関数は、「タイプライティング」効果を作成するために使用されます

function Typer()
{
    var srcText = 'EXAMPLE ';
    var i = 0;
    var result = srcText[i];
    setInterval(function() {
        if(i == srcText.length) {
            clearInterval(this);
            return;
        };
        i++;
        result += srcText[i].replace("\n", "<br />");
        $("#message").html( result);
    },
    100);

}

2番目の関数はサウンドを再生します

function playBGM()
{
    document.getElementById('bgm').play();
}

私は次のように関数を次々に呼び出しています

Typer();
playBGM();

ただし、テキストが入力されるとサウンドが再生されます。タイプライティングが終了した後にのみサウンドを再生します。

ここに私が試したものがあります： http://jsfiddle.net/GkUEN/5/

どうすれば修正できますか？

jqueryfunction
37
user2878249

コールバックパラメーターを使用する必要があります。

function Typer(callback)
{
    var srcText = 'EXAMPLE ';
    var i = 0;
    var result = srcText[i];
    var interval = setInterval(function() {
        if(i == srcText.length - 1) {
            clearInterval(interval);
            callback();
            return;
        }
        i++;
        result += srcText[i].replace("\n", "<br />");
        $("#message").html(result);
    },
    100);
    return true;


}

function playBGM () {
    alert("Play BGM function");
    $('#bgm').get(0).play();
}

Typer(function () {
    playBGM();
});

// or one-liner: Typer(playBGM);

そのため、callbackの前にifで呼び出されるパラメーター（return）として関数を渡します。

また、 this はコールバックに関する良い記事です。

JSFIDDLE

34
Ionică Bizău

以下のコードを使用できます

$.when( Typer() ).done(function() {
       playBGM();
});
62
Pradeep

遅延プロミスは、関数の実行をきちんと簡単につなぐ良い方法です。 AJAXであるか通常の関数であるかにかかわらず、コールバックよりも柔軟性が高く、把握しやすいことがわかりました。

function Typer()
{
var dfd = $.Deferred();
    var srcText = 'EXAMPLE ';
    var i = 0;
    var result = srcText[i];

更新：

////////////////////////////////

  var timer=    setInterval(function() {
                    if(i == srcText.length) {

    // clearInterval(this);


       clearInterval(timer);

////////////////////////////////


   dfd.resolve();
                        };
                        i++;
                        result += srcText[i].replace("\n", "<br />");
                        $("#message").html( result);
                },
                100);
              return dfd.promise();
            }

Play関数を修正して、オーディオの再生が終了したときにプロミスを返すようにしました。 3番目の関数は、サウンドの再生が終了すると起動します。

   function playBGM()
    {
      var playsound = $.Deferred();
      $('#bgm')[0].play();
      $("#bgm").on("ended", function() {
         playsound.resolve();
      });
        return playsound.promise();
    }


    function thirdFunction() {
        alert('third function');
    }

すべてを次のように呼び出します（JQuery 1.9.1以上を使用してください。1.7.2は、それぞれが解決するのを待つのではなく、すべての機能を一度に実行することがわかったためです）。

Typer().then(playBGM).then(thirdFunction);

今日まで、このように遅延約束を使用することはできませんでしたが、最終的にそれを把握しました。非同期イベントを含め、正確にタイミングを合わせてチェーンイベントを正確に発生させることは簡単ではありませんでした。少なくとも私にとっては、他の人がここで質問をしてくれたことに感謝しています。

3
hiJump

カスタムイベントを使用することもできます。

function Typer() {
    // Some stuff

    $(anyDomElement).trigger("myCustomEvent");
}


$(anyDomElement).on("myCustomEvent", function() {
    // Some other stuff
});
3
Jerome