Question

我创建了一些使用Jquery AJAX从数据库加载数据的简单跟踪应用程序，我需要一些显示用户的进度条，数据已加载。

我在这里有两个功能;

     function showResult(){
            valobj = $('#search_box').val();
            if(valobj == ""){
                $("#bc_result").show("slow");
                $("#result-table").show().html("<div class='alert alert-error'><button type='button' class='close' data-dismiss='alert'>&times;</button><h4>Error!</h4>Please insert your  Number... </div>");
            } else {
                $.get("ex.php", { bl : valobj }, function(data,status){
                    //getting value to components 
                    $("#result-table").show().html(data);
                    $("#title_search_result").show();
                    $("#bc_result").show("slow");      
                });
            } //end if value empty
        }

和

function progressResult(){
          var progress = setInterval(function() {
          var $bar = $('.bar');

          if ($bar.width()==680) {
             clearInterval(progress);
             $('.progress').removeClass('active');
           } else {
             $bar.width($bar.width()+40);
           }
         }, 800);
       }

如何将这两种方法结合起来，当用户点击按钮进度条工作时，完成后会显示结果？

无论如何，php文件的结果是放在div中的表

<div id="result-table"></div>

如何结合这两个功能？感谢。

更新

我在显示结果后放置一些功能来删除进度条

    function progressResult(){
          var progress = setInterval(function() {
          var $bar = $('.bar');

          if ($bar.width()==680) {
             clearInterval(progress);
             $('.progress').removeClass('active');
           } else {
             $bar.width($bar.width()+40);
           }
         }, 800);
       }

       function removeProgressResult(){
           $('.bar').hide();
           $('.progress').hide();
       }

       function showResult(){
            valobj = $('#search_box').val();
            if(valobj == ""){
                $("#bc_result").show("slow");
                $("#result-table").show().html("<div class='alert alert-error'><button type='button' class='close' data-dismiss='alert'>&times;</button><h4>Error!</h4>Please insert your BL Number... </div>");
            } else {
                progressResult();
                $.get("ex.php", { bl : valobj }, function(data,status){
                    alert(status);
                    if(status == "success"){
                        //getting value to components 
                        $("#result-table").show().html(data);
                        $("#title_search_result").show();
                        $("#bc_result").show("slow");
                        //removeProgressResult();
                    } 
                });
            } //end if value empty
        }

showResult函数正在调用progressREsult（），而是显示结果，进度条和结果汇集在一起。

如何解决？

Answer 1

您的拳头功能必须更改

因此，当调用showResult（）时，您将调用progressResult（）必须调用当ajax返回时不显示结果，让等待直到progressResult（）完成工作

你必须改变第二个功能才能这样做在完成功能后你必须显示结果

function showResult(){
            valobj = $('#search_box').val();
            if(valobj == ""){
                $("#bc_result").show("slow");
                $("#result-table").show().html("<div class='alert alert-error'><button type='button' class='close' data-dismiss='alert'>&times;</button><h4>Error!</h4>Please insert your  Number... </div>");
            } else {

                progressResult();

                $.get("ex.php", { bl : valobj }, function(data,status){
                    //getting value to components 
                    $("#result-table").html(data);
                    $("#title_search_result").show();
                    $("#bc_result").show("slow");      
                });
            } //end if value empty
        }



function progressResult(){
          var progress = setInterval(function() {
          var $bar = $('.bar');

          if ($bar.width()==680) {
             clearInterval(progress);

             $("#result-table").show();


             $('.progress').removeClass('active');
           } else {
             $bar.width($bar.width()+40);
           }
         }, 800);
       }

只有在ajax获得结果后才能完成进度条

加载JQuery Data时的进度条

1 个答案: