显示带有 ajax 请求的进度条进度 [英] showing progressbar progress with ajax request

问题描述

我想在 ajax 请求触发和完成时使用 jquery ui 进度条显示进度.问题是我不知道如何根据 ajax 请求的进度设置进度条的值.这是一个开始的代码:

I want to show progress with jquery ui progress bar when an ajax request fires and when it finishes. The problem is I don't know how to set values for the progress bar depending on the progress of the ajax request. Here's a code to start with:

function ajaxnews()
    {
        $('.newstabs a').click(function(e){
            var section = $(this).attr('id');
            var url = base + 'news/section/' + section;

            $.ajax({
                url : url,
                dataTye : 'html',
                start : loadNews,
                success : fillNews
            });
        });
    }



// start callback functions
   function loadNews()
   {

       $('#progressbar').fadeIn();
       $('#progressbar').progressbar({ //how shoud I set the values here});
   }

   function fillNews()
   {
    $('#progressbar').progressbar('option', 'value', ?? /* how do I find this?*/);   
    $('#progressbar').fadeOut();
   }

推荐答案

根本问题是你不知道请求需要多长时间.

The fundamental problem is that you do not know how long the request is going to take.

对于进度条，您需要设置一个百分比，或已完成的步骤数.

For the progress bar, you need to set a percentage, or a number of completed steps.

如果不想让进度条只是从 0 跳到 100，就需要有办法在请求完成前测量完成率.

If you do not want the progress bar to just jump from 0 to 100, you need to have some way to measure the completion rate before the request is finished.

如果你能猜出需要多长时间，你可以使用一个计时器让它自动递增到 90%，当服务器响应到来时，将它设置为 100%.当然，这有点假.

If you can guess how long it takes, you could use a timer to have it incrementally advance to, say, 90%, automatically, and when the server response comes it, set it to 100%. Of course, that is faking it quite a bit.

如果您有多个请求，您可以使用已完成请求的数量作为百分比.如果有意义，您可以将单个请求分解为多个，但请仔细考虑这对网络流量和响应时间的影响.不要为了进度条而做.

If you have more than one request, you could use the number of completed requests as a percentage. If it makes sense, you could break down your single request into multiple, but carefully think about the impact this has on network traffic and response times. Don't just do it for the sake of the progress bar.

如果请求确实需要很长时间，您可以向服务器发出额外的请求以查询进度.但这可能意味着服务器端的大量工作.

If the request really takes long, you could fire off additional requests to the server to inquire the progress. But that could mean a lot of work server-side.

抱歉，进度条很难...

Sorry, but progress bars are hard...

这篇关于显示带有 ajax 请求的进度条进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！