Delay the next function in the method chain

Question

I am trying to learn more about the method chain in Javascript and would like to know the correct way to create delay without jQuery for the following function in the chain:

var foo = function() { this.delay = function(per) { setTimeout(start, per); return this; }; this.start = function() { alert('start!'); }; }; var bar = new foo().delay(1000).start(); 

Answer 1

This is not easy to do. jQuery uses a specific queuing system .

Suppose you want to do this without jQuery, you have to implement the queue yourself.

For example, this very simplified implementation:

 var foo = function() { var queue = []; var timer; this.delay = function(per) { timer = setTimeout(function(){ timer = 0; var f; while (f = queue.shift()) f(); }, per); return this; }; this.addFunction = function(f) { if (timer) queue.push(f); else f(); return this; }; this.start = function() { this.addFunction(function(){alert('start')}); return this; }; }; 

Demonstration

---

If you want to link another function not defined in foo, you can do

 var bar = new foo().delay(3000).start() .addFunction(function(){alert("another chained one")}); 

Demonstration

Answer 2

This will allow you to chain with multiple delays: http://jsfiddle.net/z4Uyf/1/

JS:

 var foo = function() { var delayed = []; var delayExecution = false; var delayCount = 0; function handleDelay(func){ delayed.push(func); delayCount++; } function delayDone(){ delayExecution = false; if( typeof(delayed[0]) == "function" ){ delayed[0](); delayed.splice(0,1); } if( delayed.length > 0 ) delayExecution = true; } this.delay = function(per) { delayExecution = true; setTimeout(function(){ delayDone(); }, per); return this; }; this.start = function() { if( delayExecution ){ handleDelay(arguments.callee); }else{ alert("start!"); } return this; }; }; var bar = new foo().delay(1000).start().delay(5000).start();