Ritarda alla prossima funzione nella catena del metodo

Sto cercando di saperne di più sul concatenamento dei metodi in Javascript e vorrei sapere come creare un ritardo senza jQuery per la funzione successiva nella catena:

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

Questo non è facile da fare. jQuery utilizza uno specifico sistema di code .

Supponiamo che tu voglia farlo senza jQuery, dovresti implementare una coda tu stesso.

Ad esempio questa implementazione molto semplicistica:

 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; }; }; 

Dimostrazione


Se vuoi concatenare un’altra funzione non definita in foo, puoi farlo

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

Dimostrazione

Ciò ti consentirà di concatenare più ritardi: 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();