自動刷新div jQuery +進度欄加載器

Question

我想在我的自動刷新腳本上添加一些進度條。

這里的腳本：

  function update() {
  $("#warning").html('Loading..'); 
  $.ajax({
    type: 'GET',
    url: 'result.php',
    timeout: 3000,
    success: function(data) {
      $("#div_result").html(data);
      $("#warning").html(''); 
      window.setTimeout(update, 20000);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#warning").html('Timeout contacting server..');
      window.setTimeout(update, 20000);
    }
});
}

$(document).ready(function() {
    update();
});

在“暫停”期間（20秒），我想顯示一個進度條。 你有想法嗎 ？

Answer 1

只需將函數progressStatrt（20）放在update（）之前；

http://jsfiddle.net/77udsv9o/3/

CSS：

#progressbar {
      background-color: black;
      border-radius: 13px; /* (height of inner div) / 2 + padding */
      padding: 3px;
    }

    #progressbar > div {
       background-color: orange;
       width: 0%; /* Adjust with JavaScript */
       height: 20px;
       border-radius: 10px;
    }

的HTML

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


<a id="aStart">START</a>

JS

var timeInterval;
var maxSec=0;
var curSec=0;


$(function () {
    $('#aStart').click(function(){
        progressStatrt(20)//sec. for pause
    })    
});

function progressStatrt(pauseDurationSec)
{
    maxSec=pauseDurationSec;
    timeInterval= setInterval(function(){
        progessSet()
    }, 1000);
}    

function progessSet()
{
    curSec++;
    var proc=100*curSec/maxSec;
    $('#progressbar div').width(proc+'%');

    if(curSec>=maxSec) progressStop();
}
function progressStop()
{
    clearInterval(timeInterval);
}