Question

在最终下载完成后，我很难弄清楚如何突破这个进度条。我试过休息并返回false，似乎都没有工作。该页面应该加载，然后进度条开始第一次下载，然后进行第二次和第三次下载，并应在第3次下载后停止并显示一个警告或对话框，说明＆＃34;完成＆＃34; - 使用一个按钮，在单击时将用户重定向到另一个URL。我知道这很简单，但我不知道如何实现这一目标。如果有任何一个大师可以伸出援手，我会很感激。

    <head>
  <title>Download Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


  <script>
    var i=0;
    var u=0;

function fnc(){
    setInterval(function(){
    document.getElementById("bar").style.width=i+"%";
    document.getElementById("bar").innerHTML=i+"%";
    document.getElementById("u1").innerHTML=i+"%";

    i++;
    if(u===0){document.getElementById("u1").innerHTML="Download 1";}
    if(u===1){document.getElementById("u1").innerHTML="Download 2";}
    if(u===2){document.getElementById("u1").innerHTML="Download 3";}


    if(i===100){

        u++; 
        i=0;}
    }, 150);
}

</script>

</head>
<body onload="fnc()">

<div class="container">
  <h3 id="u1">Starting downloads</h3>
    <div class="progress">
    <div id="bar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100">
    </div>
  </div>
</div>
</body>

Answer 1

您使用了setInterval，这意味着“继续这样做”。

您可以使用setTimeout并继续添加新的超时，或者您可以存储setInterval的结果，然后在完成时使用clearInterval：

// create update as a separate function instead of inline
function update() {
    ...
    // update finished, just return
    if (u===4) return;
    // not finished, start again
    setTimeout(update, 150);
}
// start update checks
setInterval(update, 150);

或

var timer = null;
timer = setInterval(function() {
    // update finished, cancel timeout
    if (u===4) { clearInterval(timer); }
}, 150);

个人偏好是第一个，因为您可以更好地控制重新启动循环，并且不会冒第一个循环完成之前启动第二个循环的风险。

jQuery Progress Bar循环

1 个答案: