0

Web サイトの Chrome 拡張機能を作成して JavaScript を学んでいます。Web サイトには、4 つのビデオのリストを表示するセクションがあり、さらにビデオをロードするためのボタンがあります。このボタンをクリックすると、AJAX 呼び出しを介してビデオの新しいリストが読み込まれます。

getNextVideo()リスト内の次のビデオの URL を取得する関数があります。たとえば、3 番目のビデオを再生している場合、4 番目のビデオの URL を取得します。4 番目のビデオを表示している場合は、関数を介してクリックをシミュレートし (ビデオの新しいリストをロードします) getNextVideoList()、1 秒のタイムアウト後に新しくロードされたリストの最初のビデオを取得して、DOM が更新されるのを待ちます (ミューテーション オブザーバーを使用しようとしましたが、私のスキル レベルでは複雑すぎました)。

function getNextVideo()
{
    if (getVideoPosition() == 4)
    {

        function ad()
        {
            getVideo(1);
        }

        setTimeout(ad, 1000);

        getNextVideoList();
    }
    else
    {
        var index = getVideoPosition() + 1;
        return getVideo(index);
    }
}

getVideoPosition()簡単な jQuery nth-child セレクターを使用して、リスト内のビデオのインデックスを取得します。1、2、3、またはの値を返します4。

getVideo(n)ビデオのインデックス (1、2、3、または 4) を取得し、そのビデオの URL を返します。戻り値は、コンソールで次のように表示されます。"http://video.example.com/video-id"

私の問題はgetNextVideo()、キューの 4 番目のビデオを実行するundefinedと、コンソールに返されることです。getNextVideo()AJAX 呼び出しとその後の DOM 更新の後、関数がリストの最初のビデオの URL を返すようにするにはどうすればよいですか?

4

2 に答える 2

1

これは、getNextVideo()の場合に戻り値がないためgetVideoPosition() == 4です。戻り値はありませんundefined。

コードを見ると、if (getVideoPosition() == 4)ブロック内に戻りがありません。関数からの戻りがない場合、戻り値はundefinedです。戻り値が必要な場合は、return ステートメントを追加する必要があります。によって呼び出された関数はsetTimeout()AFTER で実行されるgetNextVideo()ため、戻り値の設定に参加できないことに注意してください。

本当に非同期プログラミングを使用したい場合setTimeout()(そもそもなぜそうしているのかわかりません)、非同期プログラミング モデルに切り替える必要があります。つまり、getNextVideo()atからの戻り値を使用しません。すべてですが、次の値で完了したときにコールバックを呼び出します。そのコールバックは、 内から非同期に実行できますsetTimeout()。しかし、そもそもなぜあなたが使っているのかさえsetTimeout()わからないので、その追加の複雑さが最良の選択であるかどうかはわかりません. 非同期を取り除けばsetTimeout()、そのアームからも通常どおり値を返すことができgetNextVideo()ます。

于 2013-08-22T05:31:16.543 に答える