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

Question

描述

安装设备API

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

监控 API

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

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

---

我的目标

就是一直调用monitor API，实时异步更新我的进度条。当它达到200时，完成，我将隐藏进度条并显示成功消息。

---

我试过了

逻辑

1. 调用API
2. 等待 1 秒
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是因为我不想对API服务器进行DDOS攻击。

---

结果

我得到的结果是死循环。

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

加载图标似乎卡住了。

控制台似乎卡住了，甚至无法展开我的回复。

由于 CPU 使用率过高，计算机发出很大的风扇噪音。 Chrome 响应缓慢。

我该如何调试？

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

一旦上一个请求结束，它就会轮询，速度非常快。

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

希望对你有帮助