jQuery AJAX循环刷新jQueryUI ProgressBar

Question

我有一个jQueryUI进度条,应该显示完成查询的百分比.Oracle有一个很好的系统表,可以让你看到需要超过10秒的操作.我正在尝试对此查询进行交错的$ .ajax调用以刷新进度条.

问题是,我可以让循环在没有任何等待时间的情况下发出快速激活请求,或者只是延迟整个JavaScript的执行.

我通过单击jQueryUI对话框中的"执行"按钮来启动第一个请求.

$("#dlgQuery").dialog({
    buttons: {
        Execute: function () {
            $(this).dialog("close");
            StartLoop();
        }
    }
});

我正在尝试构建StartLoop()函数或创建递归GetProgress()函数.理想情况下,我将有一个公共变量var isDone = false作为我何时终止循环或停止递归调用该函数的指示器.

为简单起见,我刚刚创建了一个执行100次的静态循环:

function StartLoop(){
    for (var i = 0; i < 100; i++) {
        GetProgress();
    }
}

这是我的样本ajax请求:

function GetProgress() {
    $.ajax({
        url: "query.aspx/GetProgress",
        success: function (msg) {
            var data = $.parseJSON(msg.d);
            $("#pbrQuery").progressbar("value", data.value);
            //recursive?
            //GetProgress();

            //if (data.value == 100) isDone = true;                
        }
    });
}

所以我发现到目前为止:

setTimeout(GetProgress(), 3000)在StartLoop()冻结Javascript,并且对话框没有关闭(我假设,因为它将等到查询完成).

这个,pausecomp(3000)做了很多相同的事情.

如果我在我的AJAX请求的"成功"函数中调用其中任何一个,它将被忽略(可能是因为它以异步方式启动另一个调用).

我有点被困在这里,任何帮助都会受到赞赏,谢谢.

Answer 1

而不是setTimeout(GetProgress(), 3000),你会想要:

function StartLoop(){
    for (var i = 0; i < 100; i++) {
        setTimeout(GetProgress(), 3000*i);
    }
}

否则,所有100将在3秒后开火.相反,你想要0,3000,6000,9000等,即3000*i;

更好,你可以使用setInterval和clearInterval:

var myInterval = setInterval(GetProgress(), 3000);

并在回调中,执行:

$.ajax({
    url: "query.aspx/GetProgress",
    success: function (msg) {
        var data = $.parseJSON(msg.d);
        $("#pbrQuery").progressbar("value", data.value);

        if (data.value == 100) {
            isDone = true;
            clearInterval(myInterval);
        }          
    }
});

clearInterval将阻止它GetProgress()再次打电话.使用该setInterval方法意味着您不必预先知道需要多少个轮询循环.它会一直持续到你完成为止.

或者更好的是,您可以GetProgress()从ajax回调调用,其优点是只有在您从查询中获得响应后才会再次轮询:

function GetProgress() {
    $.ajax({
        url: "query.aspx/GetProgress",
        success: function (msg) {
            var data = $.parseJSON(msg.d);
            $("#pbrQuery").progressbar("value", data.value);

            if (data.value == 100) {
                isDone = true;
            } else {
                setTimeout(GetProgress(), 2000);
            }
        }
    });
}

然后只需调用GetProgress()一次即可启动循环.