0

我正在制作一个名为“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)
    })
}
4

3 回答 3

2

这肯定需要很长时间......尤其是对于像我这样的老前辈！

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

好主意顺便说一句！

于 2013-08-13T18:00:19.387 回答
1

如果 API 允许（检查用户协议），您可以尝试将 API 数据缓存或存储在您的服务器上，这样您就不必在每次加载应用程序时都连接到 API。

于 2013-08-13T18:01:10.707 回答
1

一般注意事项：

  1. 你错过了很多; 在某些行的末尾

  2. birthDays 对象的最后一个元素后面有一个 , 这是错误的

  3. birthDays 对象很大（如果可以，请尝试找出另一种处理它的方法。

  4. 除了上面提出的家伙的建议（特别是@Jason P 关于将所有请求合并为一个的评论），我建议以下内容：

由于birthDays 很大，我建议每隔 5 年或 10 年创建多个对象，这将加快循环速度

缺点是你现在必须循环多个对象，所以也许你可以像这样组织它们

{ d60To65:{........}, d65To70:{........} ..... }

再加上这会增加你的代码的复杂性

注意：js 对象按照规范是无序的（你的内部对象就是这种情况 - 生日）

出于这个原因，我建议您使用 JS Linked List 来确保排序

http://www.nczonline.net/blog/2009/04/13/computer-science-in-javascript-linked-list/

5-修复你的循环可能是这样的for (var i = 0, l = birthDay.length; i < l; i++)

6-将您的变量直接放在函数启动之后，而不是在每个循环上创建它们

 var age = 0; //number as it can't be otherwise and now you can easily make checks on it
    var date = ""; //a string for the same reasons as age
    var artist = ""; //same comment
    var track = ""; //same comment

对函数中的变量的相同评论（您可能会在其中找到它们）

7- 如果您发现自己使用 js 日期，您可能需要检查Moment.js，因为它有一些实用功能

希望这有帮助

并且由于某种原因，轮播不适用于 Firefox 22（如果您需要支持）

于 2013-08-13T18:58:51.210 回答