根据API的响应异步更新进度条

Question

Description

安装设备API

我有一个安装设备的API。当我点击它时，API将开始安装我的设备，并返回一个taskID

监控API

然后我将使用taskID传递给另一个API调用来跟踪安装进度。

Monitor API将返回1到200之间的整数，这是我安装进度的百分比。

---

My goal

是继续调用监视器API，并实时异步更新我的进度条。当它达到200时，它就完成了，我将隐藏进度条并显示成功消息。

---

I've tried

逻辑

1. 调用API
2. 等一下
3. 如果仍未达到200，请再次调用API
4. 重复
5. 直到我得到200％
6. 然后离开循环
7. 完

核心代码

码

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;

我把1s的计时器，因为我不想DDOS的API服务器。

---

Result

我得到的结果是无限循环，:(

我还没有添加进度条，因为我想先让代码在控制台中运行。我现在得到的只是加载图标......

加载图标似乎冻结了

控制台似乎冻结了，甚至无法扩展我的回复

由于CPU使用率高，计算机会产生很多风扇噪音

铬响应滞后

---

Questions

如何进行并进一步调试？

---

我现在对任何建议持开放态度。

任何提示/建议/帮助将非常感谢！

Answer 1

你正试图以错误的方式进行民意调查。我会告诉你这些例子。

方法1使用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 });
})();

一旦前一个请求结束，它将非常快速地进行轮询。

方法2使用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);
})();

我用于创建长轮询和检查用户状态的另一种方法。

 (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
})();

希望这可以帮助