نمایش progress bar زمان کار با تابع XMLHttpRequest

باسلام من از تابع زیر برای ارتباط با webAPI و دریافت یک رشته JSON استفاده می کنم

var getJSON = function(url, callback) {

    var xhr = new XMLHttpRequest();

    xhr.open('GET', url, true);

    xhr.responseType = 'json';



    xhr.onload = function() {

      var status = xhr.status;

      if (status === 200) {

        callback(null, xhr.response);

      } else {

        callback(status, xhr.response);

      }

    };

    xhr.send();

};

بدلیل اینکه تعداد فراخوانی تابع بالای 20.000 بار است. میخوام روند تکمیل عملیات در یک progress بار به کاربر نشان داده بشه چکار کنم؟ ممنون بابت راهنمایی

لطفا دوستانیکه اطلاع دارند راهنمایی کنن. ممنون

پروگرس باررو برای چی میخای نشون بدی ؟ برای 20 هزار تا ؟ یعنی اینکه پروگرس از اولین درخواست شروع بشه و با 20 هزارمین به 100% برسه ؟

بله دقیقا. همین کار را میخوام انجام بدم

یه شمارنده بزار که به ازای هر درخواست ایکس 1 دونه بهش اضافه بشه که بدونی در هر لحظه چند تا درخواست از 20 هزار تا ارسال شده
بعد هر بار که یک عدد به این اضافه شد محاسبه میکنی که چند درصد از 20000 هستش اون عدد که فرمولش میشه

(x/2000 ) * 100

وقتی بدست آوردی عدد رو میتونی به کاربر نشون بدی که فلان درصد از پروسس طی شده که حالا یا میتونی به صورت عددی نشون بدی یا یک دیو بسازی و عرضش رو برابر با اون درصد بزاری که همون پروگرس بار بشه

مثلا اگه 1000 تا اراسال شده باشه طبق فرمول

(1000 / 20000) * 100  

میشه 5 یعنی 5 درصد از 20 هزار تا ارسال شده بعد میتونی با js عرض یک div رو که از قبل تو صفحه آماده کردی برابر با 5% بزاری
و این پروسه رو به ازای هردرخاستی که ارسال میشه تکرار کن تا به 100% برسه

ممنون.همین کار را کردم ولی درخواستها و شمارنده با هم sync نیستن. یعنی اول درخواستها ارسال میشن و در حین ارسال مثلا 500 تا درخواست شمارنده شروع به شمارش میکنه و هنگام callback چند تا از درخواستها هم در چندتا درخواست دیگه ارسال میشه و خلاصه خیلی بی نظم شمارنده عمل میکنه.(قبل از نمایش روی progress توی console بررسی کردم)

با بررسی github و stackoverflow تونستم مشکل را حل کنم. ممنون

توی کال بک باید عدد رو افزایش بدی نه هنگام ارسال درخواست