2013-01-16 14 views
7

sto cercando di saperne di più su Metodo concatenamento in Javascript e vorrei sapere il modo corretto per creare un ritardo senza jQuery per la funzione successiva nella catena:ritardo per la prossima funzione nella catena metodo

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

var bar = new foo().delay(1000).start(); 
+3

Non capisco perché qualcuno ha votato per chiudere. Questa è una domanda molto reale e interessante. –

risposta

7

Questo non è facile da fare. jQuery utilizza uno specific queue system.

Supponiamo di volerlo fare senza jQuery, si dovrà implementare una coda da soli.

Per esempio, questo molto semplicistico implementazione:

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


Se si vuole catena di un'altra funzione non definita in pippo, si può fare

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

Demonstration

.210
+0

grazie! allora come potrei incatenare un altro metodo ad esso? – user1982408

+0

@ user1982408 Ho modificato con una coda più abile e un esempio di concatenamento con una funzione arbitraria. Si noti che questo è ancora semplicistico e non mira a sostituire la coda di jQuery per tutti gli usi;) –

+0

ammorbidisce la mia mente all'inizio, ma sono pronto a capire la logica - seriamente grazie – user1982408

2

Questo vi permetterà di catena con 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(); 
Problemi correlati