javascript - Utilising the same ajax data for a "refresh all" event (wanting to prevent multiple calls) -
so have page multiple containers dynamically added , filled html, of populated data pulled via ajax json file. every 5 minutes page runs function gets every container (marked class) , each of them works out id/index (probably not efficiently) , ajax post.etc.
but ajax call resulting data same every instance (no limit on average there ~30 ajax calls of same data 1 whole page), grabs it, decodes it, sorts it, updates html , really.
this feels clunky , im sure cause issues down line, there can prevent these 30+ ajax posts without disabling being 'asynchronous'/lessen impact of it?
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);
it seems call returns data containers already. don't pass specific id it, , filtering results when them, make assumption.
in case, need move .each loop inside ajax success function. way ajax runs once, , loop through data when it's received apply html.
i think should it:
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 necessary? server-side sort more efficiently, esp if it's result of 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);
Comments
Post a Comment