Asynchronously update the execution database by API response

Question

Description

Install device API

I have an API to install the device. When I click, the API will start installing my device and return the taskID

Monitor API

Then I will use taskID to pass to another API call to track the installation progress.

The monitor API will return an integer from 1 to 200, which is a percentage of my progress in my installation.

---

My goal

keep calling the monitor APIs and asynchronously update my progress bar in real time. When it reaches 200, it will be done, I will hide the progress bar and show a success message.

---

I tried

logics

1. Call API
2. Wait 1 s
3. Call the API again if it has not reached 200
4. Reiteration
5. Until I got 200 percent
6. Then get out of cycles
7. the end

core code

The code

 var ajax = $.ajax({ headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').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 < 200); }else{ var message = $installDeviceResponse['result'][0]['status']['message']; var code = $installDeviceResponse['result'][0]['status']['code']; console.error('Error code : ' + code + ' ' + message ); } }); return; 

I set the timer 1s because I do not want the DDOS server API.

---

Result

As a result, I got an endless loop.

I don’t have a progress bar yet, because I want the code to work in the console first. All I got now is the download icon.

The download icon seems to freeze.

The console seems to freeze, cannot even extend 1 of my answer.

The computer is very noisy due to the high processor load. Chrome is slow to respond.

How can I debug this?

Answer 1

You are trying to do a survey, but not correctly. I will show you examples.

Method 1 using jquery ajax

 function poll(){ $.ajax({ url: "server", success: function(data){ //Update your dashboard gauge console.log('P TaskIdResponse : ',$percent); }, dataType: "json", complete: poll, timeout: 2000 }); })(); 

He will interrogate very quickly as soon as the previous request is completed.

Method 2 using setTimeout

 // The setTimeout Technique (Not Recommended - No Queues But New AJAX Request Each Time ∴ Slow) (function poll(){ setTimeout(function(){ $.ajax({ url: "server", success: function(data){ //Update your dashboard gauge salesGauge.setValue(data.value); //Setup the next poll recursively poll(); }, dataType: "json"}); }, 30000); })(); 

Another method that I used to create a long poll and check the status of the user.

  (function() { var status = $('.status'), poll = function() { $.ajax({ url: 'status.json', dataType: 'json', type: 'get', success: function(data) { // check if available status.text('Offline!'); if ( data.live ) { // get and check data value status.text(data.info); // get and print data string clearInterval(pollInterval); // optional: stop poll function } }, error: function() { // error logging console.log('Error!'); } }); }, pollInterval = setInterval(function() { // run function every 2000 ms poll(); }, 2000); poll(); // also run function on init })(); 

Hope this helps