0

我正在通过为网站编写 Chrome 扩展来学习 JavaScript。该网站有一个部分显示 4 个视频的列表，并带有一个加载更多视频的按钮。当您单击此按钮时，它会通过 AJAX 调用加载新的视频列表。

我有一个函数，getNextVideo()它获取列表中下一个视频的 URL。例如，如果您正在观看第三个视频，那么它将获取第四个视频的 URL。如果您正在播放第四个视频，那么它将通过一个函数模拟点击（加载新的视频列表）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()when 没有返回值getVideoPosition() == 4。没有返回值显示为undefined。

如果您查看代码，则if (getVideoPosition() == 4)块内没有返回。当函数没有返回时，返回值为undefined. 如果你想有一个返回值，那么你必须添加一个返回语句。setTimeout()注意， gets execute AFTER调用的函数getNextVideo()已经返回，不能参与设置返回值。

如果你真的想使用异步编程setTimeout()（我不确定你为什么首先这样做），那么你将不得不切换到异步编程模型，这意味着你不会使用getNextVideo()at的返回值全部，但在完成下一个值时会调用回调。该回调可以从setTimeout(). 但是，我不知道你为什么一开始就使用setTimeout()，所以我不知道这种额外的并发症是否是最好的选择。如果你摆脱了异步，setTimeout()那么你也可以正常地从那个手臂返回一个值getNextVideo()。

于 2013-08-22T05:31:16.543 回答
0

据我对您的代码的理解，您正在将控制权从您的函数“getNextVideo”转移到条件发生时的 setTimeOut 回调。
“getNextVideo”函数的实际职责是“返回 getVideo(index);”

如果你这样做你的代码是可能的。

        if (getVideoPosition() == 4)
{
    function ad()
    {
        getNextVideo(true);
    }
    setTimeout(ad, 1000);
    getNextVideoList();
}


function getNextVideo(isFirst)
{
    var index = isFirst==true?1:getVideoPosition() + 1;
    return getVideo(index);
}
于 2013-08-22T04:48:33.363 回答