javascript - 从javascript中的函数返回数组

Question

所以我有浓厚的 Python 背景，并且我正在努力研究 JavaScript。这里我有一个函数，它返回艺术家“v-2-followers”的 soundcloud 歌曲的轨道 ID 数组。我将如何将 SC.get(stuff) 的输出分配给变量以在另一个函数中重用轨道列表。我确定我缺少一些基本的东西。我不是在寻找解释如何执行此操作的答案，而是在寻找为什么这样做的答案。

也就是说，我也非常感谢如何。 :)

(function() {

    SC.initialize({
        client_id:'__CLIENTID__';
    });

    // Would like to set a variable equal to the output of
    SC.get('/tracks', { q: 'v-2-followers' }, function(tracks) {
        trackIdList = [];
        tracks.forEach(function(track){
            trackIdList.push(track.id);
        });
        return trackIdList;
    });

    // And use the variable here.
    SC.stream('/tracks/'+trackIdList[Math.floor(Math.random() * myArray.length)], function(sound) {
        sound.play();
        sound.pause();
        $('#fabrizio').hover(function(e){
            sound.resume();
        }, function(e){
            sound.pause();
        });
    });
})();

我发现我在这里遗漏了一些关于变量赋值和范围或函数回调的基本知识。我已经精疲力尽地浏览了有关该主题的文档。如果有人能告诉我如何做到这一点，更重要的是，为什么这样做，以供将来引用。

Answer 1

您将 trackIdList 作为全局变量，因为它不是使用 var 创建的。事实上，您已经可以从任何其他功能访问它。如果您想将其范围限制为仅外部函数，请添加 var trackIdList; 作为函数的第一行。您应该在任何地方都用 var 声明变量，以限制它们的范围。

(function() {
    var trackIdList;
    ...
})();

进一步阅读:What is the scope of variables in JavaScript?

您需要了解的另一个概念是关于 JavaScript 中的异步执行和回调。填充 trackIdList 的代码包含在一个回调函数中，该函数(很可能)在您调用 SC.stream() 之后调用。如果 SC.stream() 依赖于 trackIdList 的值，则应从回调函数中调用它。

通过分离回调函数可能有助于说明发生了什么。

(function () {
    var trackIdList = [];

    SC.initialize({
        client_id: '__CLIENTID__'
    });

    SC.get('/tracks', { q: 'v-2-followers' }, processTracks);

    var randomIndex = Math.floor(Math.random() * myArray.length);
    SC.stream('/tracks/' + trackIdList[randomIndex], processSound);

    function processTracks(tracks) {
        tracks.forEach(function (track) {
            trackIdList.push(track.id);
        });
    }

    function processSound(sound) {
        sound.play();
        sound.pause();
        $('#fabrizio').hover(function (e) {
            sound.resume();
        }, function (e) {
            sound.pause();
        });
    }
})();

SC.get() 发出异步请求并立即返回。然后调用 SC.stream()，无需等待请求返回。 processTracks() 在请求返回之前不会被调用。问题在于 SC.stream() 依赖于 processTracks()，但会立即被调用。要解决此问题，请从 SC.get() 的回调函数中调用 SC.stream():

(function () {
    SC.initialize({
        client_id: '__CLIENTID__'
    });

    SC.get('/tracks', { q: 'v-2-followers' }, processTracks);

    function processTracks(tracks) {
        var trackIdList = [];
        tracks.forEach(function (track) {
            trackIdList.push(track.id);
        });

        var randomIndex = Math.floor(Math.random() * myArray.length);
        SC.stream('/tracks/' + trackIdList[randomIndex], processSound);
    }

    function processSound(sound) {
        sound.play();
        sound.pause();
        $('#fabrizio').hover(function (e) {
            sound.resume();
        }, function (e) {
            sound.pause();
        });
    }
})();