Skip to content
This repository was archived by the owner on Jul 29, 2019. It is now read-only.

Commit ff3948f

Browse files
gkubisagkubisa
committed
Use requestAnimationFrame to throttle redraws
1 parent 6de24a2 commit ff3948f

File tree

7 files changed

+25
-47
lines changed

7 files changed

+25
-47
lines changed

‎docs/timeline/index.html

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,13 @@
3131
<script language="JavaScript">
3232
smoothScroll.init();
3333
</script>
34-
34+
3535
<!-- Tipue vendor css -->
3636
<link href="../css/tipuesearch.css" rel="stylesheet">
37-
37+
3838
<!-- Tipue vendor css -->
3939
<link href="../css/tipuesearch.css" rel="stylesheet">
40-
40+
4141
<script type="text/javascript" src="../js/toggleTable.js"></script>
4242
</head>
4343
<body onload="prettyPrint();">
@@ -213,7 +213,7 @@ <h3 id="items">Items</h3>
213213
or a DataView (offering 1 way data binding).
214214
Items are regular objects and can contain the properties <code>start</code>,
215215
<code>end</code> (optional), <code>content</code>,
216-
<code>group</code> (optional), <code>className</code> (optional),
216+
<code>group</code> (optional), <code>className</code> (optional),
217217
<code>editable</code> (optional), and <code>style</code> (optional).
218218
</p>
219219

@@ -624,7 +624,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
624624
If no <code>order</code> properties are provided, the order will be undetermined.
625625
</td>
626626
</tr>
627-
627+
628628
<tr>
629629
<td>groupOrderSwap</td>
630630
<td>Function</td>
@@ -787,7 +787,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
787787
Only applicable when option <code>selectable</code> is <code>true</code>.
788788
</td>
789789
</tr>
790-
790+
791791
<tr>
792792
<td style="font-size: 0.9em">multiselectPerGroup</td>
793793
<td>boolean</td>
@@ -805,7 +805,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
805805
<td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code><code>true</code></code>.
806806
</td>
807807
</tr>
808-
808+
809809
<tr>
810810
<td>onAddGroup</td>
811811
<td>function</td>
@@ -829,7 +829,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
829829
<td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
830830
</td>
831831
</tr>
832-
832+
833833
<tr>
834834
<td>onMoveGroup</td>
835835
<td>function</td>
@@ -853,7 +853,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
853853
<td>Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code><code>true</code></code>.
854854
</td>
855855
</tr>
856-
856+
857857
<tr>
858858
<td>onRemoveGroup</td>
859859
<td>function</td>
@@ -967,13 +967,6 @@ <h2 id="Configuration_Options">Configuration Options</h2>
967967
<td>A template function used to generate the contents of the items. The function is called by the Timeline with an items data as argument, and must return HTML code as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
968968
</tr>
969969

970-
<tr>
971-
<td>throttleRedraw</td>
972-
<td>number</td>
973-
<td><code>0</code></td>
974-
<td>Limit the maximum number of redraws to once every x milliseconds. For example setting throttleRedraw to `100` milliseconds will limit the number of redraws to 10 times per second.</td>
975-
</tr>
976-
977970
<tr class='toggle collapsible' onclick="toggleTable('optionTable','timeAxis', this);">
978971
<td><span parent="timeAxis" class="right-caret"></span> timeAxis</td>
979972
<td>Object</td>

‎index-timeline-graph2d.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,4 @@ exports.timeline = {
4444
// bundled external libraries
4545
exports.moment = require('./lib/module/moment');
4646
exports.Hammer = require('./lib/module/hammer');
47-
exports.keycharm = require('keycharm');
47+
exports.keycharm = require('keycharm');

‎lib/timeline/Core.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -222,8 +222,7 @@ Core.prototype.setOptions = function (options) {
222222
var fields = [
223223
'width', 'height', 'minHeight', 'maxHeight', 'autoResize',
224224
'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates',
225-
'locale', 'locales', 'moment', 'rtl',
226-
'throttleRedraw'
225+
'locale', 'locales', 'moment', 'rtl'
227226
];
228227
util.selectiveExtend(fields, this.options, options);
229228

@@ -233,7 +232,7 @@ Core.prototype.setOptions = function (options) {
233232
this.dom.leftContainer = this.dom.rightContainer;
234233
this.dom.rightContainer = contentContainer;
235234
this.dom.container.style.direction = "rtl";
236-
this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical-rtl'; }
235+
this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical-rtl'; }
237236

238237
this.options.orientation = {item:undefined,axis:undefined};
239238
if ('orientation' in options) {
@@ -330,7 +329,7 @@ Core.prototype.setOptions = function (options) {
330329
// override redraw with a throttled version
331330
if (!this._origRedraw) {
332331
this._origRedraw = this._redraw.bind(this);
333-
this._redraw = util.throttle(this._origRedraw, this.options.throttleRedraw);
332+
this._redraw = util.throttle(this._origRedraw);
334333
} else {
335334
// Not the initial run: redraw everything
336335
this._redraw();

‎lib/timeline/Timeline.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ function Timeline (container, items, groups, options) {
4747
end: null,
4848

4949
autoResize: true,
50-
throttleRedraw: 0, // ms
5150

5251
orientation: {
5352
axis: 'bottom', // axis orientation: 'bottom', 'top', or 'both'
@@ -426,15 +425,15 @@ Timeline.prototype.getItemRange = function () {
426425

427426
var start = getStart(item);
428427
var end = getEnd(item);
429-
428+
430429
if (this.options.rtl) {
431430
var startSide = start - (item.getWidthRight() + 10) * factor;
432431
var endSide = end + (item.getWidthLeft() + 10) * factor;
433432
} else {
434433
var startSide = start - (item.getWidthLeft() + 10) * factor;
435434
var endSide = end + (item.getWidthRight() + 10) * factor;
436435
}
437-
436+
438437

439438
if (startSide < min) {
440439
min = startSide;

‎lib/timeline/optionsGraph2d.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,6 @@ let allOptions = {
100100
},
101101

102102
autoResize: {boolean},
103-
throttleRedraw: {number},
104103
clickToUse: {boolean},
105104
end: {number, date, string, moment},
106105
format: {
@@ -225,7 +224,6 @@ let configureOptions = {
225224
},
226225

227226
autoResize: true,
228-
throttleRedraw: [10, 0, 1000, 10],
229227
clickToUse: false,
230228
end: '',
231229
format: {

‎lib/timeline/optionsTimeline.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ let allOptions = {
2727
align: {string},
2828
rtl: {boolean, 'undefined': 'undefined'},
2929
autoResize: {boolean},
30-
throttleRedraw: {number},
3130
clickToUse: {boolean},
3231
dataAttributes: {string, array},
3332
editable: {
@@ -145,7 +144,6 @@ let configureOptions = {
145144
align: ['center', 'left', 'right'],
146145
direction: false,
147146
autoResize: true,
148-
throttleRedraw: [10, 0, 1000, 10],
149147
clickToUse: false,
150148
// dataAttributes: ['all'], // FIXME: can be 'all' or string[]
151149
editable: {
@@ -229,4 +227,4 @@ let configureOptions = {
229227
}
230228
};
231229

232-
export {allOptions, configureOptions};
230+
export {allOptions, configureOptions};

‎lib/util.js

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -702,29 +702,20 @@ exports.updateProperty = function (object, key, value) {
702702
};
703703

704704
/**
705-
* Throttle the given function to be only executed once every `wait` milliseconds
705+
* Throttle the given function to be only executed once per animation frame
706706
* @param {function} fn
707-
* @param {number} wait Time in milliseconds
708707
* @returns {function} Returns the throttled function
709708
*/
710-
exports.throttle = function (fn, wait) {
711-
var timeout = null;
712-
var needExecution = false;
709+
exports.throttle = function (fn) {
710+
var scheduled = false;
713711

714712
return function throttled () {
715-
if (!timeout) {
716-
needExecution = false;
717-
fn();
718-
719-
timeout = setTimeout(function() {
720-
timeout = null;
721-
if (needExecution) {
722-
throttled();
723-
}
724-
}, wait)
725-
}
726-
else {
727-
needExecution = true;
713+
if (!scheduled) {
714+
scheduled = true;
715+
requestAnimationFrame(function () {
716+
scheduled = false;
717+
fn();
718+
});
728719
}
729720
}
730721
};

0 commit comments

Comments
 (0)