如何动态更改 JQueryUI 进度条的值？

Question

在我的导入照片脚本中，我尝试在带有 Ajax 请求的 while 循环之后更新进度条（Jquery UI）。

JQueryUI 进度条，它应该在 ajax 请求启动之前显示，之后执行。所以我在我的while循环执行结束时有用户反馈......（控制台向我显示这些应用程序运行良好，顺序正确）

想过用live()或者bind()，但是不知道怎么测试……

这是我的 jquery 代码：

    $(function() {

    var percent_progressbar=0;

    $('#myform').submit(function() {

        $('#myform').hide(); 
        $("#text_result").html("Import in progress : <span class='progression'>0/0</span>").show(10, function() {

        $("#myprogressbar").progressbar({value:percent_progressbar});           
        $("#myprogressbar").show(10, function() {

            if (jQuery.trim($("#id_src").val()).length!=0) {
            // Total number of photos to import
            $.ajax({
                type : 'POST',
                async : false,
                url : '/nbphotos.php',
                data : 'chem=mydir',
                success : function(nbphotos){
                if (nbphotos>0){
                    $(".progression").html("0"+" / "+nbphotos);

                    var finish=false;
                    var nb_photos_imported=0;
                    var ajax_done = false;
                    var resultat_ajax="";
                    // Variables envoyées en Ajax
                    var datas = desvariables;
                    while (nb_photos_imported < nbphotos) {

                        ajax_done = false;

                        $.ajax({
                        type : 'GET',
                        async : false,
                        url : '/traitement.php',
                        data : datas,
                        success : function(resultat){
                            resultat_ajax=resultat;
                            ajax_done=true;
                            nb_photos_imported++;
                        }
                        });

                        if (ajax_done==true){
                        if (resultat_ajax=="ok") {
                            percent_progressbar = Math.floor(nb_photos_imported*100/nbphotos);
                            $("#myprogressbar").progressbar("option", "value", percent_progressbar);
                            console.info("Succès ajax (resultat : OK) : "+percent_progressbar);
                            $(".progression").html(nb_photos_imported+" / "+nbphotos);
                        } else {
                            finish=true;
                            $("#text_result").html(ajax_done);
                            return false;
                        }                   
                        } else {
                        // ajax error => exit the while
                        console.info("Ajax execution error "+nb_photos_imported);
                        return false;
                        }                   
                    } // While

                    if (finish==true) {
                        $("#myprogressbar").hide('slow');
                        $('#text_result').html("Import of "+nb_photos_imported+" photos done.");
                    }

                } else{
                    $("#text_result").html("No photo to import.");              
                    $("#myprogressbar").hide(10);
                    $('#myform').show("slow"); 
                }
                }
            });
            }
        });
        }); // callback #text_result.show()

        return false;
    });


    });

Answer 1

这是我的新代码。控制台日志显示百分比的进度，照片已导入，但最后我仍然有显示。如果我在循环的某处用我的调试工具设置断点，显示会刷新并且一切正常...

$(function () {

    $("#myprogressbar").show();

    var RetourNbPhotos = "";
    var RetourImported = "";
    var fini = false;
    var percent_progressbar = 0;
    var nb_photos_imported = 0;
    var datas = desvariables; // datas sent with ajax
    // Number of photos to import
    function NbPhotoAjax() {
        return $.ajax({
            type: 'POST',
            async: false,
            url: '/boutique/modules/importimageswithiptc/ajax-nbphotos.php',
            data: 'chem=$cheminimport',
            success: function (nbphotos) {
                RetourNbPhotos = nbphotos;
            }
        });
    }

    // Photo Ajax Import
    function ImportPhotoAjax() {

        $("#text_result").html("Import in progress : <span class='progression'>0/0</span>").show();

        // RetourImported = "";
        return $.ajax({
            type: 'GET',
            async: false,
            url: '/boutique/modules/importimageswithiptc/ajax-traitement.php',
            data: datas,
            success: function (resultat) {
                RetourImported = resultat;
            }
        });
    }

    $("#myprogressbar").progressbar({
        value: percent_progressbar
    });

    $('#generator').submit(function () {
        $('#generator').hide();
        if (jQuery.trim($("#id_product_src").val()).length != 0) {

            $.when(NbPhotoAjax()).then(function () {
                if (RetourNbPhotos > 0) {
                    while (nb_photos_imported < RetourNbPhotos) {
                        $.when(ImportPhotoAjax()).then(function () {
                            nb_photos_imported++;
                            if (RetourImported == "ok") {
                                percent_progressbar = Math.floor(nb_photos_imported * 100 / RetourNbPhotos);
                                $("#myprogressbar").progressbar("option", "value", percent_progressbar);
                                console.info("Success : " + percent_progressbar + "%");
                                $(".progression").html(nb_photos_imported + " / " + RetourNbPhotos);
                            } else {
                                fini = true;
                                $("#text_result").html("ajax_reussi");
                                return false;
                            }
                        }).fail(function () {
                            //  ajax error => exit the while
                            console.info("Ajax execution error " + nb_photos_imported);
                            return false;
                        });
                    } // While
                    if (fini == true) {
                        $("#myprogressbar").hide('slow');
                        $('#text_result').html("Import of " + nb_photos_imported + " photos done.");
                    }

                } else {
                    $("#text_result").html("No photo to import.");

                    $("#myprogressbar").hide(10);
                    $('#generator').show("slow");
                }
            });
        }
        return false;
    });
});