Question

所以我有一个页面，其中动态添加多个容器并用html填充，其中一些填充了从json文件通过ajax提取的数据。每隔5分钟页面运行一个函数，它获取每个容器（用类标记），并为每个容器计算出它的id / index（可能效率不高）并执行ajax post.etc。

但是ajax调用结果数据基本上对每个实例都是一样的（没有限制，但平均而言，整个页面会有大约30个相同数据的ajax调用），它会抓取它，对其进行解码，对其进行排序，更新HTML，这就是它。

这感觉很笨拙，我肯定会引起问题，我有什么办法可以防止这些30多个ajax帖子而不会让它失去它的异步＆＃39; /减轻它的影响？

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);

利用相同的ajax数据进行＆＃34;刷新所有＆＃34;事件（想要防止多次通话）

1 个答案: