Skip to content

Commit 093f276

Browse files
josex2rjosex2r
committed
Replaced setTimeouts by requestAnimationFrame
1 parent 6d7b15c commit 093f276

File tree

1 file changed

+57
-37
lines changed

1 file changed

+57
-37
lines changed

‎src/jquery.slotmachine.js‎

Lines changed: 57 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@
99

1010
var pluginName = "slotMachine",
1111
defaults = {
12-
active: 0, //Active element [int]
13-
delay: 200, //Animation time [int]
14-
auto: false, //Repeat delay [false||int]
15-
spins: 5, //Number of spins when auto [int]
16-
randomize: null, //Randomize function, must return an integer with the selected position
12+
active: 0, //Active element [Number]
13+
delay: 200, //Animation time [Number]
14+
auto: false, //Repeat delay [false||Number]
15+
spins: 5, //Number of spins when auto [Number]
16+
randomize: null, //Randomize function, must return a number with the selected position
1717
complete: null, //Callback function(result)
1818
stopHidden: true, //Stops animations if the element isn´t visible on the screen
1919
direction: 'up' //Animation direction ['up'||'down']
@@ -92,11 +92,11 @@
9292

9393
function Timer(fn, delay) {
9494
var startTime,
95-
self = this,
96-
timer,
97-
_fn = fn,
98-
_args = arguments,
99-
_delay = delay;
95+
self = this,
96+
timer,
97+
_fn = fn,
98+
_args = arguments,
99+
_delay = delay;
100100

101101
this.running = false;
102102

@@ -248,10 +248,32 @@
248248
}
249249
}
250250

251+
/**
252+
* @desc PUBLIC - Custom setTimeout using requestAnimationFrame
253+
* @param function cb - Callback
254+
* @param Number timeout - Timeout delay
255+
*/
256+
SlotMachine.prototype.raf = function(cb, timeout) {
257+
var _raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame,
258+
startTime = new Date().getTime(),
259+
_rafHandler = function(timestamp){
260+
var drawStart = new Date().getTime(),
261+
diff = drawStart - startTime;
262+
263+
if(diff < timeout){
264+
_raf(_rafHandler);
265+
}else if(typeof cb === 'function'){
266+
cb();
267+
}
268+
};
269+
270+
_raf(_rafHandler);
271+
};
272+
251273
/**
252274
* @desc PUBLIC - Get element offset top
253-
* @param int index - Element position
254-
* @return int - Negative offset in px
275+
* @param Number index - Element position
276+
* @return Number - Negative offset in px
255277
*/
256278
SlotMachine.prototype.getTileOffset = function(index) {
257279
var offset = 0;
@@ -263,7 +285,7 @@
263285

264286
/**
265287
* @desc PUBLIC - Get current showing element index
266-
* @return int - Element index
288+
* @return Number - Element index
267289
*/
268290
SlotMachine.prototype.getVisibleTile = function() {
269291
var firstTileHeight = this.$tiles.first().height(),
@@ -274,7 +296,7 @@
274296

275297
/**
276298
* @desc PUBLIC - Changes randomize function
277-
* @param function|int - Set new randomize function
299+
* @param function|Number - Set new randomize function
278300
*/
279301
SlotMachine.prototype.setRandomize = function(rnd) {
280302
if (typeof rnd === 'number') {
@@ -289,7 +311,7 @@
289311
/**
290312
* @desc PUBLIC - Get random element different than last shown
291313
* @param boolean cantBeTheCurrent - true||undefined if cant be choosen the current element, prevents repeat
292-
* @return int - Element index
314+
* @return Number - Element index
293315
*/
294316
SlotMachine.prototype.getRandom = function(cantBeTheCurrent) {
295317
var rnd,
@@ -303,7 +325,7 @@
303325

304326
/**
305327
* @desc PUBLIC - Get random element based on the custom randomize function
306-
* @return int - Element index
328+
* @return Number - Element index
307329
*/
308330
SlotMachine.prototype.getCustom = function() {
309331
var choosen;
@@ -321,7 +343,7 @@
321343

322344
/**
323345
* @desc PRIVATE - Get the previous element (no direction related)
324-
* @return int - Element index
346+
* @return Number - Element index
325347
*/
326348
SlotMachine.prototype._getPrev = function() {
327349
var prevIndex = (this.active - 1 < 0) ? (this.$tiles.length - 1) : (this.active - 1);
@@ -330,7 +352,7 @@
330352

331353
/**
332354
* @desc PRIVATE - Get the next element (no direction related)
333-
* @return int - Element index
355+
* @return Number - Element index
334356
*/
335357
SlotMachine.prototype._getNext = function() {
336358
var nextIndex = (this.active + 1 < this.$tiles.length) ? (this.active + 1) : 0;
@@ -339,15 +361,15 @@
339361

340362
/**
341363
* @desc PUBLIC - Get the previous element dor selected direction
342-
* @return int - Element index
364+
* @return Number - Element index
343365
*/
344366
SlotMachine.prototype.getPrev = function() {
345367
return this._direction.selected === 'up' ? this._getPrev() : this._getNext();
346368
};
347369

348370
/**
349371
* @desc PUBLIC - Get the next element
350-
* @return int - Element index
372+
* @return Number - Element index
351373
*/
352374
SlotMachine.prototype.getNext = function() {
353375
return this._direction.selected === 'up' ? this._getNext() : this._getPrev();
@@ -371,17 +393,15 @@
371393
* @param string||boolean fade - Set fade gradient effect
372394
*/
373395
SlotMachine.prototype._setAnimationFX = function(FX_SPEED, fade) {
374-
var self = this;
375-
376-
setTimeout(function() {
377-
self.$tiles.removeClass([FX_FAST, FX_NORMAL, FX_SLOW].join(' ')).addClass(FX_SPEED);
396+
this.raf(function() {
397+
this.$tiles.removeClass([FX_FAST, FX_NORMAL, FX_SLOW].join(' ')).addClass(FX_SPEED);
378398

379399
if (fade !== true || FX_SPEED === FX_STOP) {
380-
self.$slot.add(self.$tiles).removeClass(FX_GRADIENT);
400+
this.$slot.add(this.$tiles).removeClass(FX_GRADIENT);
381401
} else {
382-
self.$slot.add(self.$tiles).addClass(FX_GRADIENT);
402+
this.$slot.add(this.$tiles).addClass(FX_GRADIENT);
383403
}
384-
}, this.settings.delay / 4);
404+
}.bind(this), this.settings.delay / 4);
385405
};
386406

387407
/**
@@ -393,7 +413,7 @@
393413

394414
/**
395415
* @desc PRIVATE - Checks if the machine is on the screen
396-
* @return int - Returns true if machine is on the screen
416+
* @return Number - Returns true if machine is on the screen
397417
*/
398418
SlotMachine.prototype.isVisible = function() {
399419
//Stop animation if element is [above||below] screen, best for performance
@@ -405,7 +425,7 @@
405425

406426
/**
407427
* @desc PUBLIC - SELECT previous element relative to the current active element
408-
* @return int - Returns result index
428+
* @return Number - Returns result index
409429
*/
410430
SlotMachine.prototype.prev = function() {
411431
this.futureActive = this.getPrev();
@@ -416,7 +436,7 @@
416436

417437
/**
418438
* @desc PUBLIC - SELECT next element relative to the current active element
419-
* @return int - Returns result index
439+
* @return Number - Returns result index
420440
*/
421441
SlotMachine.prototype.next = function() {
422442
this.futureActive = this.getNext();
@@ -427,8 +447,8 @@
427447

428448
/**
429449
* @desc PUBLIC - Starts shuffling the elements
430-
* @param int repeations - Number of shuffles (undefined to make infinite animation
431-
* @return int - Returns result index
450+
* @param Number repeations - Number of shuffles (undefined to make infinite animation
451+
* @return Number - Returns result index
432452
*/
433453
SlotMachine.prototype.shuffle = function(spins, onComplete) {
434454
var self = this;
@@ -495,7 +515,7 @@
495515

496516
/**
497517
* @desc PUBLIC - Stop shuffling the elements
498-
* @return int - Returns result index
518+
* @return Number - Returns result index
499519
*/
500520
SlotMachine.prototype.stop = function(showGradient) {
501521
if (!this.isRunning) {
@@ -553,9 +573,9 @@
553573
});
554574

555575
//Disable blur
556-
setTimeout(function() {
557-
self._setAnimationFX(FX_STOP, false);
558-
}, delay / 1.75);
576+
this.raf(function() {
577+
this._setAnimationFX(FX_STOP, false);
578+
}.bind(this), delay / 1.75);
559579

560580
return this.active;
561581
};
@@ -572,7 +592,7 @@
572592
}
573593
self.isRunning = true;
574594
if (!self.isVisible() && self.settings.stopHidden === true) {
575-
setTimeout(function() {
595+
self.raf(function() {
576596
self._timer.reset();
577597
}, 500);
578598
} else {

0 commit comments

Comments
 (0)