title: Asynchronously update progress bar base on the response from API
body: <h1>Description</h1>
  <p><a href="https://i.stack.imgur.com/U4Te0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U4Te0.png" alt="enter image description here" /></a></p>
  <p><strong>Install device API</strong></p>
  <p>I have an API to install a device. When I hit it, API it will start install my device , and return a <code>taskID</code></p>
  <p><a href="https://i.stack.imgur.com/ijWLL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ijWLL.png" alt="enter image description here" /></a></p>
  <p><strong>Monitor API</strong></p>
  <p>I will then use the <code>taskID</code> to pass on to another API call to track the progress of installing.</p>
  <p>Monitor API will return an integer from 1 - 200, which is the percentage of my progress of my installing.</p>
  <hr />
  <h1>My goal</h1>
  <p>is to keep calling the monitor API, and asynchronously update my progress bar real time. When it reach 200, it is done, I will hide the progress bar and show success message.</p>
  <p><a href="https://i.stack.imgur.com/YEczM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YEczM.png" alt="enter image description here" /></a></p>
  <hr />
  <h1>I've tried</h1>
  <p><strong>Logic</strong></p>
  <ol>
  <li>Call the API</li>
  <li>Wait 1 s</li>
  <li>Call the API again if still not reach 200 yet</li>
  <li>Repeat</li>
  <li>Until I got 200 percent</li>
  <li>Then get out of the loop</li>
  <li>Finish</li>
  </ol>
  <p><strong>core-code</strong></p>
  <p><a href="https://i.stack.imgur.com/0enay.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0enay.png" alt="enter image description here" /></a></p>
  <p><strong>Code</strong></p>
  <pre><code>var ajax = $.ajax({
  
      headers: {'X-CSRF-TOKEN': $('meta[name=&quot;csrf-token&quot;]').attr('value')},
      url: '/installDevice',
      type: 'POST',
      dataType: 'json',
      data: {'security-level':'medium'}
  
  });
  
  ajax.done(function ($installDeviceResponse) {
  
      console.log($installDeviceResponse);
  
      if($installDeviceResponse['result'][0]['status']['code'] == 0){
  
          var taskId = $installDeviceResponse['result'][0]['data']['task'];
          var $percent  = 0;
          do {
  
              $.ajax({url: '/monitor/'+taskId})
              .done(function ($percent) {
                  setTimeout(function(){
                      console.log('P TaskIdResponse : ',$percent);
                      
                      // update prograssbar
                      // I don't have this yet.
                      // I'm trying to print it out for now
  
                  }, 1000);
              });
          }
          while ($percent &lt; 200);
  
      }else{
          var message = $installDeviceResponse['result'][0]['status']['message'];
          var code = $installDeviceResponse['result'][0]['status']['code'];
          console.error('Error code :  ' + code + ' ' + message );
      }
  
  });
  
  return;
  </code></pre>
  <p>I put the timer of <code>1s</code> because I don’t want to DDOS the API server.</p>
  <hr />
  <h1>Result</h1>
  <p>The result I got is infinite loop.</p>
  <p>I don't have a progress bar added yet since I want to get the code working in the console first. All I got now is the loading icon.</p>
  <p>The loading icon seem to freeze.</p>
  <p><a href="https://i.stack.imgur.com/jjsGy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jjsGy.png" alt="enter image description here" /></a></p>
  <p>The console seem to freeze, cannot even expand 1 of my response.</p>
  <p><a href="https://i.stack.imgur.com/2c2GL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2c2GL.png" alt="enter image description here" /></a></p>
  <p>The computer is making a lot of fan noise because of high CPU usage. The Chrome response is laggy.</p>
  <p>How can I debug this?</p>