Javascript API 调用导致我的 Web 应用程序冻结答案

【问题标题】：Javascript API call causes freezing in my web applicationJavascript API 调用导致我的 Web 应用程序冻结
【发布时间】：2021-12-14 18:10:38
【问题描述】：

在我的 Web 应用程序中调用 API url 期间，我的 html 页面意外崩溃并引发“内存不足”错误。我真的不确定问题是什么。我正在使用 xhr 对象从服务器获取数据。我从rapid api 测试了多个酒店搜索 api，但它们中的每一个都导致了同样的问题。我的代码是：

JAVASCRIPT ONE

const btn4 = document.querySelector('#hotelBtn')

btn4.addEventListener('click', function showHotels(e) {

  var userQuery = $('#hotelQuery').val();


  const data = null;

  const xhr = new XMLHttpRequest();

  xhr.addEventListener("readystatechange", function () {
        if (this.readyState === this.DONE) {
              var hotelObj = JSON.parse(this.responseText)
              console.log(hotelObj)


              var myContainer = document.getElementById('query_results')

              for (let i = 0; hotelObj.length; i++) {

                    var myCol = document.createElement('div')
                    myCol.setAttribute('class', 'col')

                    var myRow = document.createElement('div')
                    myRow.setAttribute('class', 'row')



                    myRow.append(myCol)
                    myContainer.append(myRow)


              }





        }
  });

  xhr.open("GET", "https://booking-com.p.rapidapi.com/v1/hotels/locations?locale=en-gb&name=" + userQuery);
  xhr.setRequestHeader("x-rapidapi-host", "booking-com.p.rapidapi.com");
  xhr.setRequestHeader("x-rapidapi-key", "mykey");

  xhr.send(data);

  e.preventDefault()

})

HTML ONE

<div id="query_results">


                        <!-- Filled by Javascript -->





    
  </div>

内存不足错误：

【问题讨论】：

标签： javascript html api xmlhttprequest out-of-memory

【解决方案1】：

看起来您的代码中有一个无限循环。

您将需要根据数组长度的大小检查循环是否结束...

for (let i = 0; i < hotelObj.length; i++) {

【讨论】：

感谢您的回答，当我输入 console.log('hotelObj.length) 时，它会打印值 '5'。我不确定为什么 for 循环在我的代码中是无限的。需要执行5次。
@TolkienistCoder 它是无限的，因为您没有检查i 是否小于hotelObj.length。您的代码是：for (let i = 0; hotelObj.length; i++)，它只是检查 hotelObj.length 是否真实，因为您的循环不会修改 hotelObj 的长度，所以这将始终正确。

【解决方案2】：

在上述代码中，实现的 for 循环中的条件对于所有迭代都将为真，因此会出现问题。 @inki 提供的解决方案是正确的解决方案，因为条件块检查是否i<length，这将在数组末尾为假并退出循环。参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for

【讨论】：

【解决方案3】：

我已经用 foreach 循环结构取代了传统的 for 循环。现在问题似乎解决了。在传统的for循环中，循环可能会执行无限次导致内存不足的异常

【讨论】：