javascript - AJAX 变量未定义但它是？

Question

我正在对 JSON 页面进行 AJAX 调用，该页面获取变量以填充 HTML5 音乐播放器的播放列表。我正在尝试让播放列表数据自从 radio 获取信息后每分钟更新一次。我也不希望它刷新播放器本身，只刷新播放列表。一切都很好，除了我得到 myPlaylist is not defined 我也在尝试想出最好的方法来每分钟刷新一次 AJAX 调用......但一次只做一件事。

$(document).ready(function(){
        function ajax_playlist(str1, callback){     
            $.ajax({
                url: "http://radio.silvertoneradio.com/rpc/incoleyl/streaminfo.get",
                dataType: 'jsonp',
                success: function(data, status, xhr){  
                    callback(data);
                    console.log(arguments);
                }
            });
        }

        ajax_playlist("str", function(pl) {
             myPlaylist = [
                {
                    mp3:'http://radio.gnradio.org:9966/vod/mp4:audio/file.m4a/playlist.m3u8',
                    artist:pl.data[0].track.artist,
                    title:pl.data[0].track.title,
                    cover:pl.data[0].track.imageurl
                }
            ];
         });


        var description = 'Welcome to SilvertoneRadio.com BETA Online player. We will be gradually improving it.';

        $('body').ttwMusicPlayer(myPlaylist, {
            autoPlay:false, 
            description:description,
            jPlayer:{
                swfPath:'plugin/jquery-jplayer' //You need to override the default swf path any time the directory structure changes
            }
        });
    });

Answer 1

myPlaylist 是在调用传递给 ajax_playlist 的匿名函数时定义的。

该函数作为名为 callback 的参数传递。

这是在传递给 ajax 方法的成功函数中调用的。

异步 ​​JavaScript 和 XML 是异步的。

在接收并处理 HTTP 响应之前，不会调用成功函数。

那么发生的事情是:

1. 发送 Ajax HTTP 请求
2. description 有一个赋值
3. ttwMusicPlayer 被调用(使用当前 undefined 的 myPlaylist)
4. 收到 HTTP 响应
5. myPlaylist 获取分配给它的值

将所有依赖于具有值的 myPlaylist 的代码移动到您的回调函数中。