Jqueryで非同期実行？

Question

現在、Jsonを取得してHTMLに書き込む処理をしているのですが
現在のコードですとUSDJPYから随時処理をしていくので
最後のEURUSDまでに若干のタイムラグがあるので
タイムラグを最小限にしたい場合、どのようなアプローチが有効でしょうか？

そもそもJqueryよりPHPにした方が良いなど
コードの改善点教えて頂けると助かります

＜実行環境＞
CentOS７
VPS root権限有り
Laravel 5.7

<script type="text/javascript">
$(document).ready(function (){
    setInterval(function() {
        $.ajax({
            type: 'GET',
            scriptCharset: 'utf-8',
            url: 'http://11x.2x.35.38:1129/api2', //アドレスは仮のアドレスです
            cache: false,
            dataType: 'json',
            success: function(data) {
　　　　　　　　　//USDJPY
                $('.usdjpy tr.highlow td.buy').text(data.Highlow.USDJPY.Buy);
                $('.usdjpy tr.highlow td.sell').text(data.Highlow.USDJPY.Sell);

                $('.usdjpy tr.gmo td.buy').text(data.GMO.USDJPY.Buy);
                $('.usdjpy tr.gmo td.sell').text(data.GMO.USDJPY.Sell);

                $('.usdjpy tr.oanda td.buy').text(data.Oanda.USDJPY.Buy);
                $('.usdjpy tr.oanda td.sell').text(data.Oanda.USDJPY.Sell);

                //EURJPY
                $('.eurjpy tr.highlow td.buy').text(data.Highlow.EURJPY.Buy);
                $('.eurjpy tr.highlow td.sell').text(data.Highlow.EURJPY.Sell);

                $('.eurjpy tr.gmo td.buy').text(data.GMO.EURJPY.Buy);
                $('.eurjpy tr.gmo td.sell').text(data.GMO.EURJPY.Sell);

                $('.eurjpy tr.oanda td.buy').text(data.Oanda.EURJPY.Buy);
                $('.eurjpy tr.oanda td.sell').text(data.Oanda.EURJPY.Sell);

                //GBPJPY
                $('.gbpjpy tr.highlow td.buy').text(data.Highlow.GBPJPY.Buy);
                $('.gbpjpy tr.highlow td.sell').text(data.Highlow.GBPJPY.Sell);

                $('.gbpjpy tr.gmo td.buy').text(data.GMO.GBPJPY.Buy);
                $('.gbpjpy tr.gmo td.sell').text(data.GMO.GBPJPY.Sell);

                $('.gbpjpy tr.oanda td.buy').text(data.Oanda.GBPJPY.Buy);
                $('.gbpjpy tr.oanda td.sell').text(data.Oanda.GBPJPY.Sell);

                //EURUSD
                $('.eurusd tr.highlow td.buy').text(data.Highlow.EURUSD.Buy);
                $('.eurusd tr.highlow td.sell').text(data.Highlow.EURUSD.Sell);

                $('.eurusd tr.gmo td.buy').text(data.GMO.EURUSD.Buy);
                $('.eurusd tr.gmo td.sell').text(data.GMO.EURUSD.Sell);

                $('.eurusd tr.oanda td.buy').text(data.Oanda.EURUSD.Buy);
                $('.eurusd tr.oanda td.sell').text(data.Oanda.EURUSD.Sell);
            },
            error: function() {
                alert("読み込み失敗");
            }
        });
    }, 800);
});
</script>

{"time":"2019-09-23T03:59:20.94337827+09:00","GMO":{"USDJPY":{"Buy":107.542,"Sell":107.539},"EURJPY":{"Buy":118.505,"Sell":118.5},"GBPJPY":{"Buy":134.2,"Sell":134.19},"EURUSD":{"Buy":1.10188,"Sell":1.10184}},"Highlow":{"USDJPY":{"Buy":107.594,"Sell":107.515},"EURJPY":{"Buy":118.567,"Sell":118.489},"GBPJPY":{"Buy":134.249,"Sell":134.149},"EURUSD":{"Buy":1.10223,"Sell":1.10141},"Oanda":{"USDJPY":{"Buy":107.594,"Sell":107.515},"EURJPY":{"Buy":118.567,"Sell":118.489},"GBPJPY":{"Buy":134.249,"Sell":134.149},"EURUSD":{"Buy":1.10223,"Sell":1.10141}}}

Answer 1

JSONデータはUSDJPYからEURUSDまで同時に取得しているようですので
エレメント(DOM)の取得とtextのセットのタイムラグということになりますが、
エレメントの取得に関してはクラスやタグを並べるよりID一発で取得したほうが高速です。

$('.usdjpy tr.highlow td.buy').text(data.Highlow.USDJPY.Buy);
↓

<td id="usdjpy_highlow_buy'"> とIDを設定した上で $('#usdjpy_highlow_buy').text(data.Highlow.USDJPY.Buy);

また、JQueryにこだわらないなら
JQueryを使わずにgetElementByIdを使ったほうが高速です。

Comments

[AMK]

ありがとうございます。
document.getElementById('usdjpy_highlow_buy').innerText = data.Highlow.USDJPY.Buy;
この方法で実装できました。