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

Question

I'm learning JavaScript by writing a Chrome extension for a website. The website has a section that displays a list of 4 videos, with a button to load more videos. When you click this button, it loads a new list of videos via an AJAX call.

I have a function, getNextVideo() , which gets the URL of the next video in the list. For example, if you are on the third video, then it'll grab the URL for the fourth video. If you're on the fourth video, then it'll simulate a click (which loads the new list of videos) via a function getNextVideoList() and then grab the first in the newly loaded list after a 1s timeout to wait for the DOM to update (I tried to use mutation observers but it was too complicated for my skill level).

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

        function ad()
        {
            getVideo(1);
        }

        setTimeout(ad, 1000);

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

getVideoPosition() gets the index of the video in the list using some simple jQuery nth-child selectors. It returns the values 1 , 2 , 3 , or 4 .

getVideo(n) takes the index of the video (1, 2, 3, or 4) and returns the URL of that video. The returned value looks like this in the console: "http://video.example.com/video-id"

My problem is that when I run getNextVideo() on a video that is 4th in the queue, I get undefined returned in my console. How do I make the getNextVideo() function return the URL of the first video in the list after the AJAX call and subsequent DOM update?

Answer 1

This is because getNextVideo() doesn't have a return value when getVideoPosition() == 4 . No return value shows up as undefined .

If you look at your code, there's no return inside the if (getVideoPosition() == 4) block. When there's no return from a function, the return value is undefined . If you want there to be a return value, then you have to add a return statement. Note, the function called by setTimeout() gets executed AFTER getNextVideo() has already returned so it can't participate in setting the return value.

If you really want to use asynchronous programming with setTimeout() (I'm not sure why you're doing that in the first place), then you will have to switch to an asynchronous programming model which means you won't use a return value from getNextVideo() at all, but will call a callback when it's done with the next value. That callback can be executed asynchronously from within the setTimeout() . But, I don't know why you're even using setTimeout() in the first place so I don't know if that extra complication is the best choice or not. If you got rid of the asynchronous setTimeout() then you could just return a value normally from that arm of getNextVideo() too.

Answer 2

As far as my understanding to your code you are transferring control from your function "getNextVideo" to setTimeOut callback when condition occur.
Actual duty of your "getNextVideo" function is to "return getVideo(index);"

is it possible if you do your code like this.

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


function getNextVideo(isFirst)
{
    var index = isFirst==true?1:getVideoPosition() + 1;
    return getVideo(index);
}