Question

我正在尝试使用一个触发“ajax请求”和“加载栏”动画的按钮（我的代码显示在下方），我的问题是：

当我点击按钮时，会发送ajax请求，显示进度条，但它没有动画
如果我删除了ajax调用事件处理程序并单击该按钮，则会显示进度条并且动画正常工作。

这里有什么问题吗？

//progress bar html
var progressBarHtml = "<div id='pbar_outerdiv' style='width: 300px; height: 20px; border: 1px solid grey; z-index: 1; position: relative; border-radius: 5px; -moz-border-radius: 5px;'> "
+ "<div id='pbar_innerdiv' style='background-color: lightblue; z-index: 2; height: 100%; width: 0%;'></div>"
+ "<div id='pbar_innertext' style='z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: black; font-weight: bold; text-align: center;'>0%</div>"
+ "</div>"


// adds 2 event handlers to a button
// 1.  sends ajax request, the response is an html table
// 2.  display the progress bar, and trigger the animation
$(document).ready(function(){

  //trigger ajax request 
  $("#start-button").click(function(){
    result = $.ajax({url:"http://127.0.0.1:5000/get_cameras", dataType:"html", async:false});
    $("#camera-report").html(result.responseText);
  });

  //display the progress bar and trigger the animation
  $("#start-button").click(function(){
    $("#camera-report").html(progressBarHtml);
    triggerProgressBar();
  });


});

// trigger the progress animation
function triggerProgressBar(){
    var start = new Date();
    animateUpdate(start);
}

function animateUpdate(start) {
    var maxTime = 160000;
    var timeout = Math.floor(maxTime/100);
    var now = new Date();
    var timeDiff = now.getTime() - start.getTime();
    var perc = Math.round((timeDiff/maxTime)*100);
    if (perc <= 100) {
        updateProgress(perc);
        setTimeout(function() { animateUpdate(start);}, timeout)
    }
};

function updateProgress(percentage) {
    $('#pbar_innerdiv').css("width", percentage + "%");
    $('#pbar_innertext').text(percentage + "%");
};

进度条不使用此jquery代码

0 个答案: