How often is xhr.upload.onProgress?

Question

I subscribe to the onProgress event when a file is uploaded via XHR. My progress bar is animated (via jQuery) to provide better visual aesthetics.

onProgress seems to fire very quickly, so I wondered how often it really works, so that I can somehow develop a process by which I can respond to it so that I have one continuous animated progress bar.

Answer 1

Check out the jQuery throttle / debounce plugin to throttle calls to your callback onprogress.

: http://benalman.com/code/projects/jquery-throttle-debounce/examples/throttle/

:

xhr.upload.onprogress = $.throttle(100, function (event)
{
    // update the progress bar
});

Answer 2

jQuery ; - jQuery . :

xhr.upload.onprogress = function(event) {
  // limit calls to this function
  if (!this.NextSecond) this.NextSecond = 0;
  if (Date.getTime() < this.NextSecond) return;
  this.NextSecond = Date.getTime() + 1000;

  // this code gets executed at least one second apart from the last time
}

Answer 3

_.throttle(function, wait)

UnderscoreJS has utilities for throttling functions.

The actual amount onProgresstriggered depends on the browser, so it is best to throttle the actual time-based callback.