Question

我在这个项目中使用CodePen，这就是我发现代码中存在无限循环的方式。另外 - 它将无限循环的行号估计为第0行，这就是为什么我怀疑它与$(document).ready()代码有关。

我是一个jQuery / API初学者，如果这很明显就道歉。

以下是代码：

$(document).ready(function() {
  var key = '*****************';
  var i = 0;
  var hotArray = [];

  function isInArray(value, array) {
    return array.indexOf(value) > -1;
  }

  function getMusic() {
    $.getJSON('http://developer.echonest.com/api/v4/song/search?api_key=' + key + '&artist=led+zeppelin&sort=song_hotttnesss-desc&results=50&bucket=song_hotttnesss', function(data) {
      while ($('.songs li').length < 10) {
        if (!(isInArray(data.response['songs'][i]['hotttnesss'], hotArray))) {
          $('.songs').append('<li>' + data.response['songs'][i]['title'] + '</li>');
          hotArray.push(data.response['songs'][i]['hotttnesss'])
        }
      }
      i++;
    });
  };

  $('.click').click(getMusic);
});

代码的简要说明：

当我点击页面的某个位置（后来扩展为用户输入的艺术家）时，我试图获得Led Zeppelin的前10首歌曲。但是Echo Nest API的工作方式，返回了许多重复项。例如，＆＃34;天堂的阶梯＆＃34;和＃34;天堂的阶梯＆＃34;被认为是两首单独的歌曲。

为了解决这个问题，我正在使用＆＃34; hotttness＆＃34;每首歌的价值，每首歌都是独一无二的。同一位艺术家的两首歌可以拥有相同的热情的唯一方法就是它们实际上是同一首歌，就像这些重复的情况一样。

因此，当报告的歌曲数量低于10时，我逐步浏览每首返回的歌曲，如果其热点值不在已报道歌曲的数组中，则报告该歌曲。 hotttnesss值。报告歌曲后，歌曲的hotttnesss值将添加到阵列中。

Answer 1

i++;应该在<{>} while循环内，而不是在i循环之后。您还需要在ajax回调中将0设置为i < data.response['songs'].length，并将同一循环限制为function getMusic() { $.getJSON('http://developer.echonest.com/api/v4/song/search?api_key=' + key + '&artist=led+zeppelin&sort=song_hotttnesss-desc&results=50&bucket=song_hotttnesss', function(data) { var i, songs = data.response['songs']; for (i = 0; $('.songs li').length < 10 && i < songs.length; ++i) { if (!(isInArray(songs[i]['hotttnesss'], hotArray))) { $('.songs').append('<li>' + songs[i]['title'] + '</li>'); hotArray.push(songs[i]['hotttnesss']) } } }); }。

E.g：

Array#forEach

或者我只是使用function getMusic() { $.getJSON('http://developer.echonest.com/api/v4/song/search?api_key=' + key + '&artist=led+zeppelin&sort=song_hotttnesss-desc&results=50&bucket=song_hotttnesss', function(data) { data.response['songs'].forEach(function(song) { if (!(isInArray(song['hotttnesss'], hotArray))) { $('.songs').append('<li>' + song['title'] + '</li>'); hotArray.push(song['hotttnesss']) } }); }); }（如果你需要支持IE8，你可以使用它来填充它）：

getMusic

附注：

函数声明（例如您的;）不是语句，您不需要语句终止符（song['hotttnesss']）。（你做的是一个函数表达式，比如作为作业的一部分。）
song.hotttness可以写为response['songs']，response.songs为()等。除非属性名称以数字开头或包含不是在JavaScript标识符名称中有效，无需引用它。
在大多数情况下，将if (!(isInArray(song['hotttnesss'], hotArray))) {放在函数调用周围没有任何目的，所以
```
if (!isInArray(song['hotttnesss'], hotArray)) {
```
可能更清楚
```
isInArray
```
（只有在有目的的情况下才涉及内联调用的函数表达式。）
您不需要margin功能; jQuery已经有一个：$.inArray。（非常值得花时间阅读jQuery API开始结束。字面上只需要一两个小时，你会发现各种有用的东西，你可能不知道。）

与API

1 个答案: