Question

免责声明：我对javascript完全陌生，所以请原谅绝对的业余代码。

我有一个进度条脚本，它轮询一个转储一些json数据的URL。然后，脚本根据所述json的内容（包括进度条）更新一些html值。

这是代码的简化版：

function update_progress(status_url, index) {
  bar_id = document.getElementById(String('bar' + index));
  stage_id = document.getElementById(String('stage' + index));

  $.getJSON(status_url, function(data) {
    percent = parseInt(data['current'] * 100 / data['total']);

    // change progress bar and stage_id values
    bar_id.innerHTML = (percent + '%');
    bar_id.style.width = (percent + '%');
    stage_id.title = (data['status']);
    stage_id.value = (data['status']);
    stage_id.innerHTML = (data['status']);

    // if state is unexpected then end poll
    if (data['state'] != 'PENDING' && data['state'] != 'PROGRESS' && data['state'] != "COMPLETE") {
      stage_id.innerHTML = (data['state']);      

    // otherwise keep polling every 1.5 seconds
    } else {
      setTimeout(function() {
        update_progress(status_url, index);
      }, 1500);
    }
}

如果尚未编译json数据，有时status_url可能返回500错误。因此，我有一个按钮，可以通过再次调用update_progress来重新启动轮询。

问题： 如果用户单击“重新开始轮询”按钮，则将对同一status_url进行两个活动的轮询。

一次对许多不同的status_url进行的民意调查可能很多-数量越多，响应速度就越慢。

所以我想避免能够轮询已经进行的事情

问题：是否可以检查JS中是否已在进行具有相同值的过程？

我知道这是低效的，并且在某个时候我将完全放弃JS来使用该轮询系统-但是，在达到此目的之前，我需要对当前版本进行一些快速的效率修补。< / p>

预先感谢

Answer 1

您可以在多个回调上分离代码，这些回调将在成功，失败时执行，而其他回调则始终执行，无论成功或失败。然后，您可以猜测用户何时单击提交按钮并将其禁用，然后在请求完成后再次启用它。

var ongoing = true; // Disable submit button
$.getJSON(status_url, function(data) {
  // Your success code here
})
.fail(jqXHR, textStatus, errorThrown) {
  // Your error/retry code here
})
.always(function() {
   ongoing = false; // Enable submit button
});

Answer 2

取消javaScript间隔

您可以将setTimeout分配给变量：

var timer = setTimeout(...updateProgress...);

然后，当用户单击按钮以刷新民意调查时，您可以执行以下操作：

clearTimeout(timer)

要删除原始的超时过程，然后创建另一个超时过程。

我想这回答了你的问题。但是：

无需强制用户手动重试轮询。

如果getJson调用由于500错误而失败，您可以继续进行轮询，而不必再次清除并启动轮询。现在，我不习惯使用getJSON语法，但是从我读到的in this answer来看，您将执行以下操作：

function update_progress(status_url, index) {
  bar_id = document.getElementById(String('bar' + index));
  stage_id = document.getElementById(String('stage' + index));

  $.getJSON(status_url, function(data) {
    percent = parseInt(data['current'] * 100 / data['total']);

    // change progress bar and stage_id values
    bar_id.innerHTML = (percent + '%');
    bar_id.style.width = (percent + '%');
    stage_id.title = (data['status']);
    stage_id.value = (data['status']);
    stage_id.innerHTML = (data['status']);

    // if state is unexpected then end poll
    if (data['state'] != 'PENDING' && data['state'] != 'PROGRESS' && data['state'] != "COMPLETE") {
      stage_id.innerHTML = (data['state']);      

    // otherwise keep polling every 1.5 seconds
    } else {
      setTimeout(function() {
        update_progress(status_url, index);
      }, 1500);
    }
  })
  .done(() => {}) // is this needed? I really don't know to be honest, 
  // maybe you can skip this right away
  .fail(() => {
    setTimeout(function() {
      update_progress(status_url, index);
    }, 1500); // we keep polling if the request fail!
  })
}

检查Javascript进程是否已在运行

2 个答案:

取消javaScript间隔

无需强制用户手动重试轮询。