Permalink
Browse files

Use requestAnimationFrame to throttle redraws

  • Loading branch information...
1 parent 6de24a2 commit ff3948f85c67985be8af39dc9ace68674386f25d @gkubisa gkubisa committed Sep 13, 2016
@@ -31,13 +31,13 @@
<script language="JavaScript">
smoothScroll.init();
</script>
-
+
<!-- Tipue vendor css -->
<link href="../css/tipuesearch.css" rel="stylesheet">
-
+
<!-- Tipue vendor css -->
<link href="../css/tipuesearch.css" rel="stylesheet">
-
+
<script type="text/javascript" src="../js/toggleTable.js"></script>
</head>
<body onload="prettyPrint();">
@@ -213,7 +213,7 @@ <h3 id="items">Items</h3>
or a DataView (offering 1 way data binding).
Items are regular objects and can contain the properties <code>start</code>,
<code>end</code> (optional), <code>content</code>,
- <code>group</code> (optional), <code>className</code> (optional),
+ <code>group</code> (optional), <code>className</code> (optional),
<code>editable</code> (optional), and <code>style</code> (optional).
</p>
@@ -624,7 +624,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
If no <code>order</code> properties are provided, the order will be undetermined.
</td>
</tr>
-
+
<tr>
<td>groupOrderSwap</td>
<td>Function</td>
@@ -787,7 +787,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
Only applicable when option <code>selectable</code> is <code>true</code>.
</td>
</tr>
-
+
<tr>
<td style="font-size: 0.9em">multiselectPerGroup</td>
<td>boolean</td>
@@ -805,7 +805,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<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>.
</td>
</tr>
-
+
<tr>
<td>onAddGroup</td>
<td>function</td>
@@ -829,7 +829,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<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>.
</td>
</tr>
-
+
<tr>
<td>onMoveGroup</td>
<td>function</td>
@@ -853,7 +853,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<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>.
</td>
</tr>
-
+
<tr>
<td>onRemoveGroup</td>
<td>function</td>
@@ -967,13 +967,6 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<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>
</tr>
- <tr>
- <td>throttleRedraw</td>
- <td>number</td>
- <td><code>0</code></td>
- <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>
- </tr>
-
<tr class='toggle collapsible' onclick="toggleTable('optionTable','timeAxis', this);">
<td><span parent="timeAxis" class="right-caret"></span> timeAxis</td>
<td>Object</td>
@@ -44,4 +44,4 @@ exports.timeline = {
// bundled external libraries
exports.moment = require('./lib/module/moment');
exports.Hammer = require('./lib/module/hammer');
-exports.keycharm = require('keycharm');
+exports.keycharm = require('keycharm');
@@ -222,8 +222,7 @@ Core.prototype.setOptions = function (options) {
var fields = [
'width', 'height', 'minHeight', 'maxHeight', 'autoResize',
'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates',
- 'locale', 'locales', 'moment', 'rtl',
- 'throttleRedraw'
+ 'locale', 'locales', 'moment', 'rtl'
];
util.selectiveExtend(fields, this.options, options);
@@ -233,7 +232,7 @@ Core.prototype.setOptions = function (options) {
this.dom.leftContainer = this.dom.rightContainer;
this.dom.rightContainer = contentContainer;
this.dom.container.style.direction = "rtl";
- this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical-rtl'; }
+ this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical-rtl'; }
this.options.orientation = {item:undefined,axis:undefined};
if ('orientation' in options) {
@@ -330,7 +329,7 @@ Core.prototype.setOptions = function (options) {
// override redraw with a throttled version
if (!this._origRedraw) {
this._origRedraw = this._redraw.bind(this);
- this._redraw = util.throttle(this._origRedraw, this.options.throttleRedraw);
+ this._redraw = util.throttle(this._origRedraw);
} else {
// Not the initial run: redraw everything
this._redraw();
@@ -47,7 +47,6 @@ function Timeline (container, items, groups, options) {
end: null,
autoResize: true,
- throttleRedraw: 0, // ms
orientation: {
axis: 'bottom', // axis orientation: 'bottom', 'top', or 'both'
@@ -426,15 +425,15 @@ Timeline.prototype.getItemRange = function () {
var start = getStart(item);
var end = getEnd(item);
-
+
if (this.options.rtl) {
var startSide = start - (item.getWidthRight() + 10) * factor;
var endSide = end + (item.getWidthLeft() + 10) * factor;
} else {
var startSide = start - (item.getWidthLeft() + 10) * factor;
var endSide = end + (item.getWidthRight() + 10) * factor;
}
-
+
if (startSide < min) {
min = startSide;
@@ -100,7 +100,6 @@ let allOptions = {
},
autoResize: {boolean},
- throttleRedraw: {number},
clickToUse: {boolean},
end: {number, date, string, moment},
format: {
@@ -225,7 +224,6 @@ let configureOptions = {
},
autoResize: true,
- throttleRedraw: [10, 0, 1000, 10],
clickToUse: false,
end: '',
format: {
@@ -27,7 +27,6 @@ let allOptions = {
align: {string},
rtl: {boolean, 'undefined': 'undefined'},
autoResize: {boolean},
- throttleRedraw: {number},
clickToUse: {boolean},
dataAttributes: {string, array},
editable: {
@@ -145,7 +144,6 @@ let configureOptions = {
align: ['center', 'left', 'right'],
direction: false,
autoResize: true,
- throttleRedraw: [10, 0, 1000, 10],
clickToUse: false,
// dataAttributes: ['all'], // FIXME: can be 'all' or string[]
editable: {
@@ -229,4 +227,4 @@ let configureOptions = {
}
};
-export {allOptions, configureOptions};
+export {allOptions, configureOptions};
View
@@ -702,29 +702,20 @@ exports.updateProperty = function (object, key, value) {
};
/**
- * Throttle the given function to be only executed once every `wait` milliseconds
+ * Throttle the given function to be only executed once per animation frame
* @param {function} fn
- * @param {number} wait Time in milliseconds
* @returns {function} Returns the throttled function
*/
-exports.throttle = function (fn, wait) {
- var timeout = null;
- var needExecution = false;
+exports.throttle = function (fn) {
+ var scheduled = false;
return function throttled () {
- if (!timeout) {
- needExecution = false;
- fn();
-
- timeout = setTimeout(function() {
- timeout = null;
- if (needExecution) {
- throttled();
- }
- }, wait)
- }
- else {
- needExecution = true;
+ if (!scheduled) {
+ scheduled = true;
+ requestAnimationFrame(function () {
+ scheduled = false;
+ fn();
+ });
}
}
};

0 comments on commit ff3948f

Please sign in to comment.