javascript - 变量拒绝在 jQuery.get 回调函数中取值

Question

我正在检测一个值是否已存储在 localStorage 中(如果 localStorage 存在)，如果它不在数据库中(或者用户没有带有 localStorage 的浏览器)，那么我运行一个 AJAX GET 请求。

if (Modernizr.localstorage) {
    // there is storage
    artist = localStorage.getItem('artist');
    if (!artist) {
        // but no cache
        artist = fetchArtist();
        localStorage.setItem('artist', artist)
    }
} else {
    // there's no storage
    artist = fetchArtist();
}
function fetchArtist() {
    var fetchedArtist;
    var recentTracks;
    $.get('script.php', [], function(data) {
        recentTracks = data.recenttracks;
        fetchedArtist = ((recentTracks !== undefined) ? recentTracks.track.artist['#text'] : 'Last.fm connection failed.');
    }, 'json');
    return fetchedArtist;
}

script.php 只是获取一个 JSON 字符串，jQuery 将其转换为数据对象。我可以看到问题所在:因为 $.get 是异步的，所以在函数可以分配我之后的值之前返回 fetchedArtist 变量，但我想不出一个整洁的方法来做到这一点(也许是全局变量，但我真的宁愿不)。我可以控制台记录 fetchedArtist var inside $.get 和我想要的值，但 fetchArtist 函数总是返回未定义。

Answer 1

您必须通过从 fetchArtist() 函数中删除 return 语句来异步化您的工作流程，因为由于 $.get 的异步行为，它无法执行您需要的操作> 请求。

尝试这样的事情:

if (Modernizr.localstorage) {
    // there is storage
    var artist = localStorage.getItem('artist');
    if (!artist) {
        // but no cache
        fetchArtist();
    } else {
        doWhatYouNeedWithArtist( artist );
    }
} else {
    // there's no storage
    fetchArtist();
}

function fetchArtist() {
    var fetchedArtist;
    var recentTracks;
    $.get('script.php', [], function(data) {
        recentTracks = data.recenttracks;
        fetchedArtist = ((recentTracks !== undefined) ? recentTracks.track.artist['#text'] : 'Last.fm connection failed.');
        if ( Modernizr.localstorage ) {
                Modernizr.localstorage.setItem('artist', fetchedArtist);
        }
        // then do your stuff
        doWhatYouNeedWithArtist( fetchedArtist );
    }, 'json');
}

function doWhatYouNeedWithArtist( artists ) {
    // do stuff
}

希望对您有所帮助!再见。