1. Home
  2. Classes
  3. FooGallery.utils.Throttle

new Throttle( [ idle ] )

A timer to throttle the execution of code.

Description

This class is basically a wrapper around the window.setTimeout and window.clearTimeout functions. It was created to help throttle the execution of code in event handlers that could be called multiple times per second such as the window resize event. It is meant to limit the execution of expensive code until the specified idle time has lapsed.

Take a look at the examples for the limit and clear methods for basic usage.

Parameters
Name Type Attributes Default Description
idle number <optional>
 0

The idle time, in milliseconds, that must pass before executing the callback supplied to the limit method.
Examples

The below shows how you can use this class to prevent expensive code being executed with every call to your window resize handler. If you run this example resize your browser to see when the messages are logged.


var throttle = new FooGallery.utils.Throttle( 50 );

$(window).on("resize", function(){

	throttle.limit(function(){
		console.log( "Only called when resizing has stopped for at least 50 milliseconds." );
	});

});

Details

FooGallery.utils.Class

core/js/foogallery.js, line 2828

Members

<readonly, nullable> id :number

The id from the last call to window.setTimeout.

Details
number

null

core/js/foogallery.js, line 2835

<readonly> active :boolean

Whether or not there is an active timer.

Details
boolean

false

core/js/foogallery.js, line 2842

<readonly> idle :number

The idle time, in milliseconds, the timer should wait before executing the callback supplied to the limit method.

Details
number

0

core/js/foogallery.js, line 2849

Methods

limit( callback )

Starts a new timer clearing any previously set and executes the callback once it expires.

Parameters
Name Type Description
callback function

The function to call once the timer expires.
Examples

In the below example the callback function will only be executed once despite the repeated calls to the limit method as each call resets the idle timer.


// create a new throttle
var throttle = new FooGallery.utils.Throttle( 50 );

// this `for` loop represents something like the window resize event that could call your handler multiple times a second
for (var i = 0, max = 5; i < max; i++){

	throttle.limit( function(){
		console.log( "Only called once, after the idle timer lapses" );
	} );

}

Details

core/js/foogallery.js, line 2868

clear()

Clear any previously set timer and prevent the execution of its' callback.

Examples

The below shows how to cancel an active throttle and prevent the execution of it's callback.


// create a new throttle
var throttle = new FooGallery.utils.Throttle( 50 );

// this `for` loop represents something like the window resize event that could call your handler multiple times a second
for (var i = 0, max = 5; i < max; i++){

	throttle.limit( function(){
		console.log( "I'm never called" );
	} );

}

// cancel the current throttle timer
throttle.clear();

Details

core/js/foogallery.js, line 2898

<static> extend( [ definition ] ) → {function}

Creates a new class that inherits from this one which in turn allows itself to be extended.

Description

Every class created using this method has both the extend and override static methods added to it to allow it to be extended.

Parameters
Name Type Attributes Description
definition Object <optional>

An object containing any methods to implement/override.
Returns

A new class that inherits from the base class.

Examples

The below shows an example of how to implement inheritance using this method.


// create a base Person class
var Person = FooGallery.utils.Class.extend({
	construct: function(isDancing){
		this.dancing = isDancing;
	},
	dance: function(){
		return this.dancing;
	}
});

var Ninja = Person.extend({
	construct: function(){
		// Call the inherited version of construct()
		this._super( false );
	},
	dance: function(){
		// Call the inherited version of dance()
		return this._super();
	},
	swingSword: function(){
		return true;
	}
});

var p = new Person(true);
console.log( p.dance() ); // => true

var n = new Ninja();
console.log( n.dance() ); // => false
console.log( n.swingSword() ); // => true
console.log(
	p instanceof Person && p.constructor === Person && p instanceof FooGallery.utils.Class
	&& n instanceof Ninja && n.constructor === Ninja && n instanceof Person && n instanceof FooGallery.utils.Class
); // => true

Details

core/js/foogallery.js, line 2167

<static> override( name, fn )

Overrides a single method on this class.

Description

This is a helper method for overriding a single function of a FooGallery.utils.Class or one of its child classes. This uses the FooGallery.utils.fn.addOrOverride method internally and simply provides the correct prototype.

Parameters
Name Type Description
name string

The name of the function to override.
fn function

The new function to override with, the _super method will be made available within this function.
Examples

The below example wraps the Person.prototype.dance method with a new one that inverts the result. Note the override applies even to instances of the class that are already created.


var Person = FooGallery.utils.Class.extend({
  construct: function(isDancing){
    this.dancing = isDancing;
  },
  dance: function(){
    return this.dancing;
  }
});

var p = new Person(true);
console.log( p.dance() ); // => true

Person.override("dance", function(){
	// Call the original version of dance()
	return !this._super();
});

console.log( p.dance() ); // => false

Details

core/js/foogallery.js, line 2235