爲「全部刷新」事件（想要防止多次調用）使用相同的ajax數據

Question

所以我有一個頁面，其中多個容器動態添加並填充了html，其中一些填充了通過ajax從json文件。每5分鐘頁面運行一個函數，獲取每個容器（標有類），併爲它們中的每一個計算其id/index（可能不是非常有效），並執行ajax post.etc。

但是，ajax調用的結果數據本質上對於每個實例都是一樣的（沒有限制，但平均每個整頁都會有相同數據的〜30次ajax調用），它會抓取它，解碼它，更新HTML，這是真的。

這感覺很笨重，我肯定會引起問題，有什麼我可以做的，以防止這些30 + Ajax的職位，而不禁用它'異步'/減少它的影響？

setInterval(function() { 
    $('.fill').each(function() { 
     var selectId = this.id; 
     var selectIdNum = selectId.replace(/\D/g, ''); 
     selectedId = 'selectedcoin' + selectIdNum; 
     var index = document.getElementById(selectedId).selectedIndex; 
     $.ajax({ 
      url: 'array-to-json.php', 
      type: 'POST', 
      dataType: 'json', 
      success: function(data) { 
       data.sort(function(a, b) { 
        return (a.id > b.id) ? 1 : ((b.id > a.id) ? -1 : 0); 
       }); 
       result = data; 
       var php1 = [result[index].name, result[index].symbol, result[index].price_btc, result[index].percent_change_24h, result[index].price_usd, result[index].id, result[index]['24h_volume_usd']]; 
       var myCoinCost = parseFloat($('#buyprice' + selectIdNum).val()); 
       var myPercCoin = (parseFloat(php1[2]).toPrecision(20) - myCoinCost)/myCoinCost * 100; 
       var myCoinTotal = parseFloat($('#coins' + selectIdNum).val()); 
       var myUsdCoin = myCoinTotal * parseFloat(php1[4]).toPrecision(20); 
       $("#price" + selectIdNum).html(php1[2]); 
       $("#pricePercent" + selectIdNum).html(php1[3]); 
       $("#priceUsd" + selectIdNum).html(php1[4] + "</span>"); 
       $("#volDay" + selectIdNum).html("$" + php1[6] + "</span>"); 
       $("#myPercent" + selectIdNum).html(myPercCoin.toFixed(2) + "%"); 
       $("#myEarnings" + selectIdNum).html(myUsdCoin.toFixed(2)); 
      }, 
      error: function() { 
       alert("error"); 
      } 
     }); 
    }); 
}, 300 * 1000); 

Answer 1

看起來你的調用已經返回了所有容器的所有數據。您不會傳入任何特定的ID，並且您在獲取結果時會過濾結果，因此我會做出這樣的假設。

在這種情況下，您只需要將您的.each循環放入的ajax成功函數中。這樣，ajax只運行一次，並且在接收到數據時將其應用於HTML。

我想這應該這樣做：

setInterval(function() { 
    $.ajax({ 
     url: 'array-to-json.php', 
     type: 'POST', 
     dataType: 'json', 
     success: function(data) { 
      data.sort(function(a, b) { 
       return (a.id > b.id) ? 1 : ((b.id > a.id) ? -1 : 0); 
      }); //is this really necessary? The server-side could probably sort it more efficiently, esp if it's the result of the SQL query. 
      result = data; 
      $('.fill').each(function() { 
       var selectId = this.id; 
       var selectIdNum = selectId.replace(/\D/g, ''); 
       selectedId = 'selectedcoin' + selectIdNum; 
       var index = document.getElementById(selectedId).selectedIndex; 
       var php1 = [ 
        result[index].name, result[index].symbol, 
        result[index].price_btc, result[index].percent_change_24h, 
        result[index].price_usd, result[index].id, 
        result[index]['24h_volume_usd'] 
       ]; 
       var myCoinCost = parseFloat($('#buyprice' + selectIdNum).val()); 
       var myPercCoin = (parseFloat(php1[2]).toPrecision(20) - myCoinCost)/myCoinCost * 100; 
       var myCoinTotal = parseFloat($('#coins' + selectIdNum).val()); 
       var myUsdCoin = myCoinTotal * parseFloat(php1[4]).toPrecision(20); 
       $("#price" + selectIdNum).html(php1[2]); 
       $("#pricePercent" + selectIdNum).html(php1[3]); 
       $("#priceUsd" + selectIdNum).html(php1[4] + "</span>"); 
       $("#volDay" + selectIdNum).html("$" + php1[6] + "</span>"); 
       $("#myPercent" + selectIdNum).html(myPercCoin.toFixed(2) + "%"); 
       $("#myEarnings" + selectIdNum).html(myUsdCoin.toFixed(2)); 
      }); 
     }, 
     error: function(jqXHR) { 
      alert("Error while fetching data"); 
      console.log("Error while fetching data: " + jqXHR.status + " " + jqXHR.statusText + " " + jqXHR.responseText); //improved error logging 
     } 
    }); 
}, 300 * 1000); 

當然