javascript - jquery 进度条计算秒数并在单击时停止

Question

我在互联网上检查了很多进度条，但似乎都没有处理以下情况:

1. 显示一个进度条，该进度条会根据时间在后台自动更新。例如简单来说，jqueryUI 进度条每秒都会在后台自动更新，直到 5 秒(5 秒时达到 100%，然后停止)。

2. 可以单击某处来停止它。

其用例是在 child 的简单游戏中，其中会显示进度，但当任务完成时，有一种简单的方法可以停止进度条。

有没有一种简单的方法可以在 jquery/javascript 中实现这一点？

编辑，根据 DavidKonrad 接受的答案，我创建了一个小型 typescript 类，并额外支持 _gProgressAlive 来查询进度是否正在运行，以及在进度完成时采取操作的回调。这是结果，希望对其他人有帮助!

var  _gProgressStatus=0;
var _gProgressMax=3;
var _gProgressIncrement=1000;
var _gProgress;
var _gProgressAlive=false;
class ProgressBar{

static stop() {
  clearInterval(_gProgress);
  _gProgressAlive=false;

}

static start(endCallback){
    _gProgressAlive=true;
     _gProgressStatus=0;
  _gProgress = setInterval(function() {
  _gProgressStatus++; 
  $("#progressbar").progressbar({
   value :_gProgressStatus,max:_gProgressMax
  });
  if (_gProgressStatus >=  _gProgressMax){ ProgressBar.stop();endCallback();}
}, _gProgressIncrement);
}

}

这是主要的 html 测试标记

<script>
ProgressBar.start(function(){   
    console.log("completed, time's up");
    console.log(_gProgressAlive); // false progress is complete, this is the callback
});
    console.log(_gProgressAlive); // should output true, progress bar has started
  </script>
<div id="progressbar"></div>

Answer 1

嗯，是的 - 它很容易实现。如果您提供了标记示例以及您到目前为止所尝试过的内容，那就更容易了:)

标记:

<div id="progressbar"></div>

脚本:

$("#progressbar").progressbar({
  value: 0,
  max : 5  
});

var value = 0,
    progress;

function stopProgress() {
  clearInterval(progress);
  $("#progressbar").progressbar({
     value : 0
  });
}

progress = setInterval(function() {
  value++; 
  $("#progressbar").progressbar({
    value : value
  });
  if (value == 5) clearInterval(progress);
}, 1000);

$(window).on('click', function() {
   stopProgress();
});    

jQueryUI 演示 -> http://jsfiddle.net/vqadbkj9/