javascript - 使用 Javascript 更快地调用 API

Question

我正在制作一个名为“Your Life in Music”的应用程序，用户输入他/她的生日，该应用程序就会显示自出生以来每个生日的热门广告牌点击率。该应用程序目前速度相当慢，因为需要一段时间才能从 Last.fm api 检索所有专辑封面图像。我想知道如何使用 JS/jQuery 加速 API 调用。线程似乎可以解决这个问题，但我不确定如何实现......

这是应用程序:http://www.dailyspiro.com

关键代码:

function compileDisplay(birthDays) {
    // create an HTML list that for each birthday displays top song, artist, and album art
    htmlObj = {}
    for (i = 0; i < birthDays.length; i++) {
        var age = birthDays[i][0]; // age isn't equal to i if user was born before 1958
        var date = birthDays[i][1];
        try {
            var track = billboard[date]['song'];
        } catch (err) {
            console.log(date)
        }
        var artist = billboard[date]['artist'];
        getAlbumArt(age, track, artist, birthDays);
    }
}

function getAlbumArt(age, track, artist, birthDays) {
    $.getJSON("http://ws.audioscrobbler.com/2.0/?method=track.getInfo&api_key=6ad5bad28ffc4dedbcf1115b3ddf5273&artist=" + artist + "&track=" + track + "&format=json&callback=?", function (data) {
        try {
            var image = data.track.album.image[2]['#text'];
            if (image == 'http://cdn.last.fm/flatness/catalogue/noimage/2/default_album_medium.png') {
                throw 'generic image';
            }
        } catch (err) {
            var image = 'images/' + track + '.jpg';
        }
        compileHtml(age, track, artist, image, birthDays)
    })
}

Answer 1

这确实需要很长时间......尤其是对于像我这样的老手来说!

我建议您开始使用默认图像构建轮播，然后在加载时将其替换为实际图像。

顺便说一句，好主意!