mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-06 11:23:48 -05:00
At the moment the first AJAX call is triggered as soon as the page loads. We then look at its response time to work out how long to wait until making the next call. This isn’t great because: - stuff is unlikely to have changed straight away, so it’s a waste of a call - while the DOM is being updated it seems to introduce a delay in clicks on links, which is either more pronounced or more noticeable when it’s happening straight away, making the UI feel less snappy I chose a value of 2 seconds as a rough proxy for the minimum time we’d expect to see a notification go from created to delivered. Median time-to-delivered was 2.9 seconds when we analysed it for https://github.com/alphagov/notifications-admin/pull/2974#discussion_r286101286
73 lines
1.7 KiB
JavaScript
73 lines
1.7 KiB
JavaScript
(function(global) {
|
|
"use strict";
|
|
|
|
var queues = {};
|
|
var dd = new global.diffDOM();
|
|
var defaultInterval = 2000;
|
|
var interval = 0;
|
|
|
|
var calculateBackoff = responseTime => parseInt(Math.max(
|
|
(250 * Math.sqrt(responseTime)) - 1000,
|
|
1000
|
|
));
|
|
|
|
var getRenderer = $component => response => dd.apply(
|
|
$component.get(0),
|
|
dd.diff($component.get(0), $(response[$component.data('key')]).get(0))
|
|
);
|
|
|
|
var getQueue = resource => (
|
|
queues[resource] = queues[resource] || []
|
|
);
|
|
|
|
var flushQueue = function(queue, response) {
|
|
while(queue.length) queue.shift()(response);
|
|
};
|
|
|
|
var clearQueue = queue => (queue.length = 0);
|
|
|
|
var poll = function(renderer, resource, queue, form) {
|
|
|
|
let startTime = Date.now();
|
|
|
|
if (document.visibilityState !== "hidden" && queue.push(renderer) === 1) $.ajax(
|
|
resource,
|
|
{
|
|
'method': form ? 'post' : 'get',
|
|
'data': form ? $('#' + form).serialize() : {}
|
|
}
|
|
).done(
|
|
response => {
|
|
flushQueue(queue, response);
|
|
if (response.stop === 1) {
|
|
poll = function(){};
|
|
}
|
|
interval = calculateBackoff(Date.now() - startTime);
|
|
}
|
|
).fail(
|
|
() => poll = function(){}
|
|
);
|
|
|
|
setTimeout(
|
|
() => poll.apply(window, arguments), interval
|
|
);
|
|
};
|
|
|
|
global.GOVUK.Modules.UpdateContent = function() {
|
|
|
|
this.start = component => setTimeout(
|
|
() => poll(
|
|
getRenderer($(component)),
|
|
$(component).data('resource'),
|
|
getQueue($(component).data('resource')),
|
|
$(component).data('form')
|
|
),
|
|
defaultInterval
|
|
);
|
|
|
|
};
|
|
|
|
global.GOVUK.Modules.UpdateContent.calculateBackoff = calculateBackoff;
|
|
|
|
})(window);
|