rewrote requestTimeout to avoid poisoning window with new methods
Costa Tsaousis (ktsaou) committed
Nov 27, 2017 at 02:56 UTC
f49336b40364adde03ae3bac092dd4dfb5ced66f
1 file changed
+112
-75
web/dashboard.js
+112
-75
@@ -423,75 +423,112 @@ var NETDATA = window.NETDATA || {};
423
424
425
// ----------------------------------------------------------------------------------------------------------------
426
- // faster / more accurate setTimeout() replacement
427
- // https://gist.github.com/joelambert/1002116#file-requesttimeout-js
428
-
429
- // requestAnimationFrame() shim by Paul Irish
430
- // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
431
- window.requestAnimFrame = (function() {
432
- return window.requestAnimationFrame ||
433
- window.webkitRequestAnimationFrame ||
434
- window.mozRequestAnimationFrame ||
435
- window.oRequestAnimationFrame ||
436
- window.msRequestAnimationFrame ||
437
- function (/* function */ callback, /* DOMElement */ element) {
438
- window.setTimeout(callback, 1000 / 60);
439
- };
440
- })();
426
442
- /**
443
- * Behaves the same as setTimeout except uses requestAnimationFrame() where possible for better performance
444
- * @param {function} fn The callback function
445
- * @param {int} delay The delay in milliseconds
446
- */
427
+ NETDATA.timeout = {
428
+ // by default, these are just wrappers to setTimeout() / clearTimeout()
429
448
- window.requestTimeout = function(fn, delay) {
430
+ step: function(callback) {
431
+ return window.setTimeout(callback, 1000 / 60);
432
+ },
433
450
- if (!window.requestAnimationFrame &&
451
- !window.webkitRequestAnimationFrame &&
452
- !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
453
- !window.oRequestAnimationFrame &&
454
- !window.msRequestAnimationFrame)
455
- return window.setTimeout(fn, delay);
434
+ set: function(callback, delay) {
435
+ return window.setTimeout(callback, delay);
436
+ },
437
457
- var start = Date.now(),
458
- handle = new Object();
438
+ clear: function(id) {
439
+ return window.clearTimeout(id);
440
+ },
441
460
- function loop() {
461
- var current = Date.now(),
462
- delta = current - start;
442
+ init: function() {
443
+ var custom = true;
444
464
- if(delta >= delay) {
465
- //var t1 = Date.now();
466
- fn.call();
467
- //var t2 = Date.now();
445
+ if(window.requestAnimationFrame) {
446
+ this.step = function(callback) {
447
+ return window.requestAnimationFrame(callback);
448
+ };
449
469
- //if(t2 - t1 > 1000 / 60)
470
- // console.log('slow function ' + (t2 - t1).toString() + ' ms');
450
+ this.clear = function(handle) {
451
+ return window.cancelAnimationFrame(handle.value);
452
+ };
453
}
472
- else {
473
- handle.value = window.requestAnimFrame(loop);
454
+ else if(window.webkitRequestAnimationFrame) {
455
+ this.step = function(callback) {
456
+ return window.webkitRequestAnimationFrame(callback);
457
+ };
458
+
459
+ if(window.webkitCancelAnimationFrame) {
460
+ this.clear = function (handle) {
461
+ return window.webkitCancelAnimationFrame(handle.value);
462
+ };
463
+ }
464
+ else if(window.webkitCancelRequestAnimationFrame) {
465
+ this.clear = function (handle) {
466
+ return window.webkitCancelRequestAnimationFrame(handle.value);
467
+ };
468
+ }
469
}
475
- };
470
+ else if(window.mozRequestAnimationFrame) {
471
+ this.step = function(callback) {
472
+ return window.mozRequestAnimationFrame(callback);
473
+ };
474
477
- handle.value = window.requestAnimFrame(loop);
478
- return handle;
479
- };
475
+ this.clear = function(handle) {
476
+ return window.mozCancelRequestAnimationFrame(handle.value);
477
+ };
478
+ }
479
+ else if(window.oRequestAnimationFrame) {
480
+ this.step = function(callback) {
481
+ return window.oRequestAnimationFrame(callback);
482
+ };
483
+
484
+ this.clear = function(handle) {
485
+ return window.oCancelRequestAnimationFrame(handle.value);
486
+ };
487
+ }
488
+ else if(window.msRequestAnimationFrame) {
489
+ this.step = function(callback) {
490
+ return window.msRequestAnimationFrame(callback);
491
+ };
492
+
493
+ this.clear = function(handle) {
494
+ return window.msCancelRequestAnimationFrame(handle.value);
495
+ };
496
+ }
497
+ else
498
+ custom = false;
499
+
500
+
501
+ if(custom === true) {
502
+ // we have installed custom .step() / .clear() functions
503
+ // overwrite the .set() too
504
+
505
+ this.set = function(callback, delay) {
506
+ var that = this;
507
+
508
+ var start = Date.now(),
509
+ handle = new Object();
510
481
- /**
482
- * Behaves the same as clearTimeout except uses cancelRequestAnimationFrame() where possible for better performance
483
- * @param {int|object} fn The callback function
484
- */
485
- window.clearRequestTimeout = function(handle) {
486
- window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
487
- window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(handle.value) :
488
- window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) : /* Support for legacy API */
489
- window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
490
- window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
491
- window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(handle.value) :
492
- clearTimeout(handle);
511
+ function loop() {
512
+ var current = Date.now(),
513
+ delta = current - start;
514
+
515
+ if(delta >= delay) {
516
+ callback.call();
517
+ }
518
+ else {
519
+ handle.value = that.step(loop);
520
+ }
521
+ }
522
+
523
+ handle.value = that.step(loop);
524
+ return handle;
525
+ };
526
+ }
527
+ }
528
};
529
530
+ NETDATA.timeout.init();
531
+
532
533
// ----------------------------------------------------------------------------------------------------------------
534
// local storage options
@@ -752,9 +789,9 @@ var NETDATA = window.NETDATA || {};
789
NETDATA.scrollY = window.scrollY;
790
791
if(NETDATA.onscroll_updater_timeout_id)
755
- window.clearRequestTimeout(NETDATA.onscroll_updater_timeout_id);
792
+ NETDATA.timeout.clear(NETDATA.onscroll_updater_timeout_id);
793
757
- NETDATA.onscroll_updater_timeout_id = window.requestTimeout(NETDATA.onscroll_updater, 0);
794
+ NETDATA.onscroll_updater_timeout_id = NETDATA.timeout.set(NETDATA.onscroll_updater, 0);
795
//console.log('onscroll() end');
796
};
797
@@ -2223,9 +2260,9 @@ var NETDATA = window.NETDATA || {};
2260
this.last_t = t;
2261
2262
if (this.timeout_id)
2226
- window.clearRequestTimeout(this.timeout_id);
2263
+ NETDATA.timeout.clear(this.timeout_id);
2264
2228
- this.timeout_id = window.requestTimeout(this.__syncSlaves, 0);
2265
+ this.timeout_id = NETDATA.timeout.set(this.__syncSlaves, 0);
2266
}
2267
}
2268
};
@@ -3236,9 +3273,9 @@ var NETDATA = window.NETDATA || {};
3273
}
3274
3275
if(this.updateChartPanOrZoomAsyncTimeOutId)
3239
- window.clearRequestTimeout(this.updateChartPanOrZoomAsyncTimeOutId);
3276
+ NETDATA.timeout.clear(this.updateChartPanOrZoomAsyncTimeOutId);
3277
3241
- window.requestTimeout(function() {
3278
+ NETDATA.timeout.set(function() {
3279
that.updateChartPanOrZoomAsyncTimeOutId = undefined;
3280
that.updateChartPanOrZoom(after, before, callback);
3281
}, 0);
@@ -5060,7 +5097,7 @@ var NETDATA = window.NETDATA || {};
5097
console.log('fast rendering...');
5098
5099
if(state.isVisible() === true)
5063
- window.requestTimeout(function() {
5100
+ NETDATA.timeout.set(function() {
5101
state.autoRefresh(function () {
5102
NETDATA.chartRefresherNoParallel(++index, callback);
5103
});
@@ -5072,7 +5109,7 @@ var NETDATA = window.NETDATA || {};
5109
if(NETDATA.options.debug.main_loop === true) console.log('waiting for next refresh...');
5110
NETDATA.options.auto_refresher_fast_weight = 0;
5111
5075
- window.requestTimeout(function() {
5112
+ NETDATA.timeout.set(function() {
5113
state.autoRefresh(function() {
5114
NETDATA.chartRefresherNoParallel(++index, callback);
5115
});
@@ -5092,8 +5129,8 @@ var NETDATA = window.NETDATA || {};
5129
NETDATA.chartRefresherReschedule = function() {
5130
if(NETDATA.options.current.async_on_scroll === true) {
5131
if(NETDATA.chartRefresherTimeoutId)
5095
- window.clearRequestTimeout(NETDATA.chartRefresherTimeoutId);
5096
- NETDATA.chartRefresherTimeoutId = window.requestTimeout(NETDATA.chartRefresher, NETDATA.options.current.onscroll_worker_duration_threshold);
5132
+ NETDATA.timeout.clear(NETDATA.chartRefresherTimeoutId);
5133
+ NETDATA.chartRefresherTimeoutId = NETDATA.timeout.set(NETDATA.chartRefresher, NETDATA.options.current.onscroll_worker_duration_threshold);
5134
//console.log('chartRefresherReschedule()');
5135
}
5136
};
@@ -5104,7 +5141,7 @@ var NETDATA = window.NETDATA || {};
5141
NETDATA.chartRefresherLastRun = now;
5142
5143
if( now < NETDATA.options.on_scroll_refresher_stop_until ) {
5107
- NETDATA.chartRefresherTimeoutId = window.requestTimeout(
5144
+ NETDATA.chartRefresherTimeoutId = NETDATA.timeout.set(
5145
NETDATA.chartRefresher,
5146
NETDATA.chartRefresherWaitTime()
5147
);
@@ -5115,7 +5152,7 @@ var NETDATA = window.NETDATA || {};
5152
5153
if(NETDATA.options.pause === true) {
5154
// console.log('auto-refresher is paused');
5118
- NETDATA.chartRefresherTimeoutId = window.requestTimeout(
5155
+ NETDATA.chartRefresherTimeoutId = NETDATA.timeout.set(
5156
NETDATA.chartRefresher,
5157
NETDATA.chartRefresherWaitTime()
5158
);
@@ -5138,7 +5175,7 @@ var NETDATA = window.NETDATA || {};
5175
if(NETDATA.options.current.parallel_refresher === false) {
5176
// console.log('auto-refresher is calling chartRefresherNoParallel(0)');
5177
NETDATA.chartRefresherNoParallel(0, function() {
5141
- NETDATA.chartRefresherTimeoutId = window.requestTimeout(
5178
+ NETDATA.chartRefresherTimeoutId = NETDATA.timeout.set(
5179
NETDATA.chartRefresher,
5180
NETDATA.options.current.idle_between_loops
5181
);
@@ -5190,7 +5227,7 @@ var NETDATA = window.NETDATA || {};
5227
// this will execute the jobs in parallel
5228
5229
if (state.running === false)
5193
- window.requestTimeout(state.autoRefresh, 0);
5230
+ NETDATA.timeout.set(state.autoRefresh, 0);
5231
}
5232
//else {
5233
// console.log('auto-refresher nothing to do');
@@ -5198,7 +5235,7 @@ var NETDATA = window.NETDATA || {};
5235
}
5236
5237
// run the next refresh iteration
5201
- NETDATA.chartRefresherTimeoutId = window.requestTimeout(
5238
+ NETDATA.chartRefresherTimeoutId = NETDATA.timeout.set(
5239
NETDATA.chartRefresher,
5240
NETDATA.chartRefresherWaitTime()
5241
);
@@ -6881,7 +6918,7 @@ var NETDATA = window.NETDATA || {};
6918
NETDATA.easypiechartClearSelection = function(state) {
6919
if(typeof state.tmp.easyPieChartEvent !== 'undefined') {
6920
if(state.tmp.easyPieChartEvent.timer) {
6884
- window.clearRequestTimeout(state.tmp.easyPieChartEvent.timer);
6921
+ NETDATA.timeout.clear(state.tmp.easyPieChartEvent.timer);
6922
}
6923
6924
state.tmp.easyPieChartEvent.timer = undefined;
@@ -6927,7 +6964,7 @@ var NETDATA = window.NETDATA || {};
6964
if(state.tmp.easyPieChartEvent.timer === undefined) {
6965
state.tmp.easyPieChart_instance.disableAnimation();
6966
6930
- state.tmp.easyPieChartEvent.timer = window.requestTimeout(function() {
6967
+ state.tmp.easyPieChartEvent.timer = NETDATA.timeout.set(function() {
6968
state.tmp.easyPieChartEvent.timer = undefined;
6969
state.tmp.easyPieChart_instance.update(state.tmp.easyPieChartEvent.pcent);
6970
}, 0);
@@ -7158,7 +7195,7 @@ var NETDATA = window.NETDATA || {};
7195
NETDATA.gaugeClearSelection = function(state) {
7196
if(typeof state.tmp.gaugeEvent !== 'undefined') {
7197
if(state.tmp.gaugeEvent.timer) {
7161
- window.clearRequestTimeout(state.tmp.gaugeEvent.timer);
7198
+ NETDATA.timeout.clear(state.tmp.gaugeEvent.timer);
7199
}
7200
7201
state.tmp.gaugeEvent.timer = undefined;
@@ -7211,7 +7248,7 @@ var NETDATA = window.NETDATA || {};
7248
if(state.tmp.gaugeEvent.timer === undefined) {
7249
NETDATA.gaugeAnimation(state, false);
7250
7214
- state.tmp.gaugeEvent.timer = window.requestTimeout(function() {
7251
+ state.tmp.gaugeEvent.timer = NETDATA.timeout.set(function() {
7252
state.tmp.gaugeEvent.timer = undefined;
7253
NETDATA.gaugeSet(state, state.tmp.gaugeEvent.value, state.tmp.gaugeEvent.min, state.tmp.gaugeEvent.max);
7254
}, 0);