Paratrooper Digital

jQuery delaying execution and looping.

One thing people need to do is trigger things on a frame by frame basis. You can create multiple timers in actionscript, but there’s potential to lead to memory holes when implemented with setTimeout and setInterval.

If you are tapping into jQuery there’s a great post on handling delays, mostly in the context of delaying a click.

Expounding upon this you can use this to emulate an actionscript timer in a jQuery plugin.

Because each element uses its own data to know if the loop should continue or not you can have multiple “timers” on the page. This also means the timers can have their own update speeds.

Downside is that there’s no way to cancel the loop, by stopUpdating you can’t prevent the next update from getting called. You can prevent the action of updating to happen by checking within your update function before doing the update, as shown below.

I’ve only tested this on a plugin that had 2 instances on a page, so there could be performance issues with lots of them on a single page.

Keep in mind there’s a few places below where you need to replace things that are in double square brackets: [[update this content]]. We’ve included liberal comments and whitespace and assume using jQuery standards for plugin development.

/** 
 * public function startUpdating
 * Start updating the [[action to complete]]
 * 
 * @return the list of elements usable for jQuery chaining
 */
startUpdating:function()
{
	return this.each( function()
	{
		var $this = $(this);
		
		var o = $this.data("options");
		o.shouldUpdate = true;
		
		/* start the updating of the [action] */
		$this.parallax('update');
	});
},



/** 
 * public function stopUpdating
 * Stops the updating the [[action to complete]]
 * 
 * @return the list of elements usable for jQuery chaining
 */	
stopUpdating:function()
{
	return this.each( function()
	{
		/* stop the updating, if its active */
		var $this = $(this);

		var o = $this.data("options");
		if(o.shouldUpdate == true){
			debug('stopUpdating ' + $this.attr("id"));
			o.shouldUpdate = false;	
		}
	});
},



/**
 * public function update
 * @description Performs a single update of the [action to complete] 
 * 
 * @return the list of elements usable for jQuery chaining
 */
update:function()
{
	return this.each( function()
	{
		var $this = $(this);
		
		/* only update if our flag was set */
		var o = $this.data("options");
		if(o.shouldUpdate == true)
		{
			/* Do whatever you want to do on a specific update */
			

			
			/* delays the calling of update again */
			var qName = "parallax";
			//debug("delay: " + o.millisecondsBetweenUpdates);
			$this.delay(o.millisecondsBetweenUpdates, qName).queue(qName, function(){
				$this.[[pluginname]]('update');
			}).dequeue(qName);
		}
	});
}

About Nate Frank

Nate is currently a Senior Presentation Layer Architect at Razorfish Chicago. As an SPLA Nate: participates in technology leadership team and resource allocations, manage fulltime and contractor resources, represents technology for groups of brands across multiple clients, furthers development of standards within the office, architects project implementations and fosters community and mentoring.

View all posts by Nate Frank

Most recent posts

Categories