0

個人的なプロジェクトの一環として、Youtube API で遊んでいます。ここで私のウェブサイトを見ることができます: www.lamusiquedelamour.com

ユーザーが到着すると、10 個の動画が読み込まれます。ユーザーが動画の最後の 30 秒前に到達すると、次の動画があるかどうかを確認します。loadmore()次の 10 個のビデオを取得するために ajax リクエストを起動するという関数を呼び出します。

Youtube API にはビデオの「現在の時間」のリスナーが実装されていないためYoutubePlayerInfo()、最初のプレーヤーの準備が整ったときに setInterval を使用して関数を起動します。(YT プレーヤーの準備が整うと、onYoutubePlayerReady 関数が自動的に呼び出されます)。

onYouTubePlayerReady: function(id) {
    if(!this.intervalYoutube) {
        inst = this;
        this.intervalYoutube = setInterval(inst.updatePlayerInfo, 250);
    }
}

そして、これが私の関数の興味深い部分で、updatePlayerInfo250ms ごとに呼び出されます。

if( (inst.currentTrack().getElement().getDuration() - inst.currentTrack().getElement().getCurrentTime()) < 30) {
    if(!inst.isNext() && (inst.state != 3)) { 
        inst.state = 3;
        inst.loadmore();
    }
}

isNext 関数は、ビデオ配列にビデオがあるかどうかのみをチェックします。したがって、今後のビデオがなく、状態が 3 でない場合は、状態を 3 に設定して ajax を起動します。そして、ここに問題があります。

Ajax 部分が遅く、250ms の setInterval があるため、「loadmore」が 1 回から 3 回の間で起動されます。

実際に状態を 3 に設定する前に、if から抜け出すのを待っていると思います。つまり、ajax が高速な場合、loadmore を 1 回呼び出しますが、それは 100% 確実ではありません。

3 回のロードモア呼び出しは「並列」で、最初の呼び出しが終了する前に 2 回目と 3 回目に入ります。

これが私がやっていることだと思います：http://i.stack.imgur.com/3l4nP.jpg

私にloadmore()一度だけ電話をかける方法を知っていますか？

4

1 に答える 1

0

setTimeoutとは対照的に使用してみてくださいsetInterval... この方法では、前のサイクルが終了するまでタイマーは開始されません。サイクルを開始するには 1 回呼び出す必要がありsetTimeout、サイクルが完了したらもう一度アクションを繰り返す必要があります。

onYouTubePlayerReady: function(id) {
        if(!this.intervalYoutube) {
            inst = this;
            this.intervalYoutube = setTimeout(inst.updatePlayerInfo, 250);
        }
}

if( (inst.currentTrack().getElement().getDuration() - inst.currentTrack().getElement().getCurrentTime()) < 30) {
    if(!inst.isNext() && (inst.state != 3)) { 
        inst.state = 3;
        inst.loadmore();
    }
    this.intervalYoutube = setTimeout(inst.updatePlayerInfo, 250);
}

setTimeout(expression, timeout);タイムアウト後にコード/関数を1回実行します

setInterval(expression, timeout);コード/関数を間隔を置いて実行し、それらの間のタイムアウトの長さ

于 2012-07-05T12:48:52.967 に答える