描述

Question

描述

安装设备API

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

监控API

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

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

我的目标

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

我试过

逻辑

调用API
等一下
如果仍未达到200，则再次调用API
重复
直到我得到200％
然后离开循环
完成

核心代码

代码

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服务器。

结果

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

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

加载图标似乎冻结

铬响应滞后

问题

如何继续进行调试？

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

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

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

希望这有帮助

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

描述

我的目标

我试过

结果

问题

1 个答案: