2013-01-16 8 views
7

Ich versuche, mehr über Methode Verkettungs in Javascript zu lernen und möchte die richtige Art und Weise wissen, eine Verzögerung ohne jQuery zur nächsten Funktion in der Kette zu schaffen:Verzögerung zur nächsten Funktion in Verfahren Kette

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

ich nicht, warum jemand schließen gestimmt. Das ist eine sehr reale und interessante Frage. –

Antwort

7

Das ist nicht einfach zu machen. jQuery verwendet eine specific queue system.

Angenommen, Sie möchten dies ohne jQuery tun, müssten Sie selbst eine Warteschlange implementieren.

Zum Beispiel diese sehr einfache Implementierung:

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


Wenn Sie eine andere Funktion nicht definiert in foo Kette möchten, können Sie

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

Demonstration

+0

danke! wie könnte ich dann eine andere Methode dazu ketten? – user1982408

+0

@ user1982408 Ich bearbeitet mit einer besseren Warteschlange und ein Beispiel für die Verkettung mit einer beliebigen Funktion. Beachten Sie, dass dies immer noch zu einfach ist und nicht darauf abzielt, die jQuery-Warteschlange für alle Verwendungen zu ersetzen;) –

+0

verwirrt mich zuerst, aber ich beginne, die Logik zu verstehen - ernsthaft danke – user1982408

2

Dadurch werden Sie auf Kette mit mehreren Verzögerungen erlauben: 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();