JSONデータを変数に設定してインクリメント+プリントする

Question

基本的には、安価なAPIから数値と画像を取得しています。私がしたいのは、Startがレーティングマイナス300で、最後が実際のレーティングである場合、レーティングカウントを1ミリ秒ごとにカウントアップさせるソートのアニメーションを作成することです。私はそこにいくつかのコードがありますが、私のサイトには何も表示されていないようで、おそらく間違いを犯しましたが、私はどこにいるのかわかりません。誰も私に助言を与えたり、正しい方向に私を指摘することができますか？

<!-- Calls on API, requests current SR --> 
<script> 
    let requestUrl = "https://ow-api.com/v1/stats/pc/us/ShalevBito- 
2753/complete"; 
    let request = new XMLHttpRequest(); 
    request.open('GET', requestUrl); 
    request.responseType = 'json'; 
    request.send(); 
    request.onload = function() { 
    logData(request.response); 
    } 
    function logData(data) { 
    document.querySelector('.rating').innerText = `${data['rating']}`; 
    document.querySelector('.rank').src = `${data['ratingIcon']}`; 
    var start = `${data['rating']}`; 
    var counter = `${data['rating']}` - 300; 
    } 
    if (counter < start) { 
    counter++; 
    } 
</script> 

<!-- Displays current SR --> 
<p class="counter"</p> 
<img class="rank"> 

Answer 1

私はあなたのコード内でこのような何かを実装すると仮定します。

あなたは、関数呼び出しを何度も繰り返してsetIntervalを使用する必要があります。 （それは毎回リセットし得るdoes notのように） clearInterval API

 
    var repeater = setInterval(logData, 1, 700); 
 
    
 
    var start = 700; 
 
    var counter = 700 - 300; 
 

 
    function logData(data) { 
 
     document.querySelector('.rating').innerText = counter; 
 

 
     if (counter < start) { 
 
      counter++; 
 
     } 
 
     else{ 
 
      clearInterval(repeater); 
 
     } 
 
    }

<span class='rating'></span>