从功能在JavaScript返回阵列(returning array from function i

2019-10-20 10:29发布

所以我来自一个沉重的蟒蛇背景,我试图环绕的javascript我的头。 在这里,我有一个返回轨道ID的由艺术家“V-2-追随者”的SoundCloud歌曲阵列功能。 我怎么会去SC.get(东西)的输出分配给一个变量,以重用的另一功能的曲目列表。 我敢肯定,我失去了一些东西根本。 我少找,解释如何做到这一点,但更多的,为什么这就像做了一个答案。

这就是说我也非常欣赏方式。 :)

(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;
    ...
})();

延伸阅读: 什么是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.stream()从回调函数SC.get()

(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();
        });
    }
})();


Answer 2:

我将解释一个办法 - 用回调。 人们之所以做这种方式是有同步操作,和异步操作。 在你的情况,你需要执行一个AJAX请求-我们不知道多久会采取SC.get来完成的,我们不希望程序挂起,而我们等待吧。 因此,而不是等待,我们告诉它“去把这些曲目,和我路过你的函数完成后调用。在此期间,我将与程序的其他部分去好了。”

(function() {

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

  var getTracks = function(callback) {
    SC.get('/tracks', { q: 'v-2-followers' }, function(tracks) {
        trackIdList = [];
        tracks.forEach(function(track){
            trackIdList.push(track.id);
        });
        callback(trackIdList);
    });
  }

  // And use the variable here.
  var stream = function(trackIdList) {
    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();
        });
     });
   }
   getTracks(stream);
 })();


文章来源: returning array from function in javascript