Delay do następnej funkcji w łańcuchu metody

Question

Próbuję dowiedzieć się więcej o metodzie łączenia w JavaScript i chcieliby wiedzieć właściwy sposób, aby utworzyć opóźnienie bez jQuery do następnej funkcji w łańcuchu:

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

Nie jest to łatwe. jQuery używa specific queue system.

Załóżmy, że chcesz to zrobić bez jQuery, sam musisz zaimplementować kolejkę.

Na przykład to bardzo uproszczone wdrożenie:

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

---

Jeśli chcesz łańcucha innej funkcji nie zdefiniowane w foo, można zrobić

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

Demonstration

Answer 2

pozwoli to na łańcuchu z wieloma opóźnieniami: 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();