Question

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

我有一个功能getNextVideo()，它会获取列表中下一个视频的网址。例如，如果您在第三个视频上，那么它将获取第四个视频的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"

我的问题是，当我在队列中排名第4的视频上运行getNextVideo()时，我会在控制台中返回undefined。在AJAX调用和后续DOM更新之后，如何使getNextVideo()函数返回列表中第一个视频的URL？

Answer 1

这是因为getNextVideo()在getVideoPosition() == 4时没有返回值。没有返回值显示为undefined。

如果查看代码，if (getVideoPosition() == 4)块内无法返回。当函数没有返回时，返回值为undefined。如果您希望返回值，则必须添加return语句。请注意，setTimeout()调用的函数在getNextVideo()已经返回后执行，因此无法参与设置返回值。

如果你真的想使用setTimeout()的异步编程（我不知道你为什么要这样做），那么你将不得不切换到一个异步编程模型，这意味着你赢了根本不使用getNextVideo()的返回值，但是在完成下一个值时会调用回调。该回调可以在setTimeout()内异步执行。但是，我不知道为什么你首先使用setTimeout()，所以我不知道这个额外的并发症是否是最好的选择。如果你摆脱了异步setTimeout()，那么你也可以通常从getNextVideo()的那一臂返回一个值。

Answer 2

就我对你的代码的理解而言，当条件发生时，你将控制从你的函数“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);
}

函数（从setTimeout调用）不返回值

2 个答案: