Javascript 将相同的ajax数据用于；“刷新全部”；事件（希望阻止多个呼叫）

因此，我有一个页面，其中动态添加了多个容器，并用html填充，其中一些容器填充了通过ajax从json文件中提取的数据。每5分钟，页面运行一个函数，获取每个容器（用class标记），并为每个容器计算其id/索引（可能效率不高），并执行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);

setInterval（函数（）{
$（'.fill'）。每个（函数（）{
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'，
键入：“POST”，
数据类型：“json”，
成功：功能（数据）{
数据排序（函数（a，b）{
返回（a.id>b.id）？1:（（b.id>a.id）？-1:0）；
});
结果=数据；
变量php1=[result[index]。名称，result[index]。符号，result[index]。价格btc，结果[index]。24小时变化率，结果[index]。价格美元，结果[index]。id，结果[index]['24小时交易量美元']；
var mycincost=parseFloat（$（'buyprice'+selectIdNum.val（））；
var myPercCoin=（parseFloat（php1[2]）。toPrecision（20）-mycincost）/mycincost*100；
var mycintotal=parseFloat（$（'coins'+selectIdNum.val（））；
var myUsdCoin=mycintotal*parseFloat（php1[4]）。toPrecision（20）；
$（“#price”+selectIdNum）.html（php1[2]）；
$（“#pricePercent”+selectIdNum.html（php1[3]）；
$（“#priceUsd”+selectIdNum.html（php1[4]+”）；
$（“#volDay”+selectIdNum.html（$”+php1[6]+）；
$（“#myPercent”+selectIdNum）.html（myPercCoin.toFixed（2）+“%”；
$（“#myEarnings”+selectIdNum）.html（myUsdCoin.toFixed（2））；
},
错误：函数（）{
警报（“错误”）；
}
});
});
}, 300 * 1000);

您的调用似乎已经返回了所有容器的所有数据。您不需要向其中传递任何特定的ID，并且在获得结果时会对其进行过滤，因此我将做出这样的假设

在这种情况下，您所需要做的就是移动ajax成功函数中的.each循环。这样，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);

setInterval（函数（）{
$.ajax({
url:'array to json.php'，
键入：“POST”，
数据类型：“json”，
成功：功能（数据）{
数据排序（函数（a，b）{
返回（a.id>b.id）？1:（（b.id>a.id）？-1:0）；
})；//这真的有必要吗？服务器端可能会对其进行更有效的排序，特别是如果它是SQL查询的结果。
结果=数据；
$（'.fill'）。每个（函数（）{
var selectId=this.id；
var selectIdNum=selectId.replace（/\D/g'）；
selectedId='selectedcoin'+selectIdNum；
var index=document.getElementById（selectedId）.selectedIndex；
变量php1=[
结果[index]。名称，结果[index]。符号，
结果[index]。价格[btc]，结果[index]。24小时变化百分比，
结果[index]。价格为美元，结果[index]。id，
结果[指数][24小时交易量[美元]
];
var mycincost=parseFloat（$（'buyprice'+selectIdNum.val（））；
var myPercCoin=（parseFloat（php1[2]）。toPrecision（20）-mycincost）/mycincost*100；
var mycintotal=parseFloat（$（'coins'+selectIdNum.val（））；
var myUsdCoin=mycintotal*parseFloat（php1[4]）。toPrecision（20）；
$（“#price”+selectIdNum）.html（php1[2]）；
$（“#pricePercent”+selectIdNum.html（php1[3]）；
$（“#priceUsd”+selectIdNum.html（php1[4]+”）；
$（“#volDay”+selectIdNum.html（$”+php1[6]+）；
$（“#myPercent”+selectIdNum）.html（myPercCoin.toFixed（2）+“%”；
$（“#myEarnings”+selectIdNum）.html（myUsdCoin.toFixed（2））；
});
},
错误：函数（jqXHR）{
警报（“获取数据时出错”）；
console.log（“获取数据时出错：”+jqXHR.status+“”+jqXHR.statusText+“”+jqXHR.responseText）；//改进的错误记录
}
});
}, 300 * 1000);

当然，考虑到这一点我觉得很愚蠢！我也很欣赏错误函数的附加代码。排序最初是服务器端的，但我在正确地重新编码数据时遇到了一些问题，所以我将其移动到js。我会把它添加到待办事项列表中-谢谢