無限循環$（document）.ready當與API接口

我在這個項目上使用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); 
});

代碼的簡要說明：

我試圖獲得前10名的歌曲Led Zeppelin的，當我點擊頁面的某個位（稍後將被擴展到用戶輸入的藝術家）。但是，Echo Nest API的工作方式會返回許多重複項。例如，「天國的階梯」和「天國的階梯」被認爲是兩首獨立的歌曲。

爲了解決這個問題，我使用每首歌曲的「hotttnesss」值，每首歌曲都是獨一無二的。同一個歌手的兩首歌曲唯一可以擁有相同的樂句的方式是，如果它們實際上是同一首歌曲，則這些重複的情況就是這樣。

因此，當報告的歌曲數量低於10時，我正在瀏覽每個返回的歌曲，並且在歌曲的霍特值不在已報告的歌曲的霍特值數組中時報告歌曲。報告歌曲後，歌曲的霍特值將被添加到數組中。

來源

2016-01-04 khanu263

i++;應該是裏面的while循環，而不是在它之後。您還需要在您的ajax回調中將i設置爲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']) 
      } 
     } 
    }); 
}

或者我只用Array#forEach（你能勻它，如果你需要支持IE8）：

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']) 
      } 
     }); 
    }); 
}

旁註：

功能聲明（例如您的getMusic）不是聲明，您不需要聲明結束符（;）。除非屬性名以數字開頭或包含ISN字符（你的函數表達這就是，比方說，被轉讓的部分後做。）
song['hotttnesss']可以寫song.hotttness，response['songs']爲response.songs等。在JavaScript標識符名稱中無效，不需要引用它。
有沒有通過把()圍繞在大多數情況下，函數調用服務的宗旨，讓
```
if (!(isInArray(song['hotttnesss'], hotArray))) { 
```
可以更清楚地時，有一個目的，讓他們參與
```
if (!isInArray(song['hotttnesss'], hotArray)) { 
```
（唯一倍內聯調用的函數表達式）。
您不需要isInArray函數; jQuery已經有一個：$.inArray。（非常值得你花時間閱讀jQuery API開始結束，字面上只需要一兩個小時，你會發現各種你可能不知道的有用的東西。）

來源

2016-01-04 07:43:23

Thanks for the響應。我明白你的意思，而且它看起來應該有效，但實施該解決方案只會返回一首歌曲，我希望它返回十首。 – khanu263

@ khanu263：然後在某個地方還有一個邏輯錯誤，但是上面的地址說明了問題提到的無限循環。我建議通過[*如何調試小程序*]（http://ericlippert.com/2014/03/05/how-to-debug-small-programs/）進行工作。 –

無限循環$（document）.ready當與API接口

回答

相關問題