在函数执行期间显示 jQuery 进度条

Question

我有一个按钮点击功能，它完成了一系列任务。我想在完成每个任务后显示和更新进度条，比如说 25%、50%，同样，我正在使用 jQuery 进度条来实现这一点，并使用 4 个隐藏字段来存储不同的值，但进度条不会随着函数继续执行直接显示100%完成代码示例如下

<asp:Button ID="Button1" runat="server" Text="btnExecute" OnClientClick="return timeout_init();" OnClick="btnExecute_Click" />

代码隐藏：设置不同的隐藏字段值

protected void btnExecute_Click(object sender, EventArgs e)
    {
        //Ist level task complete
        hfProgressValue.Value = "25";
        Thread.Sleep(1000);

        //IInd level task completion
        ProgressValue1.Value = "50";
        Thread.Sleep(1000);

        //3rd level task 
        prg2.Value = "75";
        Thread.Sleep(1000);

        //4th level task
        hfprg3.Value = "100";
    }

javascript

function timeout_init() {

            var progressBarVal = $("input[id$='hfProgressValue']").val();
            var progressBarVal1 = $("input[id$='ProgressValue1']").val();
            var progressBarVal2 = $("input[id$='prg2']").val();
            var progressBarVal3 = $("input[id$='hfprg3']").val();

            if (progressBarVal != "") {
                $("#progressbar").progressbar({
                    value: parseInt(progressBarVal)
                });
            }
            if (progressBarVal1 != "") {
                $("#progressbar").progressbar({
                    value: parseInt(progressBarVal1)
                });
            }
            if (progressBarVal2 != "") {
                $("#progressbar").progressbar({
                    value: parseInt(progressBarVal2)
                });
            }
            if (progressBarVal3 != "") {
                $("#progressbar").progressbar({
                    value: parseInt(progressBarVal3)
                });
            }
            setTimeout('timeout_init()', 0);
        }

Answer 1

你需要使用ajax来

1. 提交原始请求
2. 轮询服务器以获取进度更新。

进度需要存储在请求之外，以便每个请求都可以访问进度。