Retard à la fonction suivante dans la chaîne de méthode

Question

Je tente d'en savoir plus sur la méthode enchaînant en Javascript et souhaite connaître la bonne façon de créer un retard sans jQuery à la fonction suivante de la chaîne:

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

Ce n'est pas facile à faire. jQuery utilise un specific queue system. Supposons que vous vouliez le faire sans jQuery, vous devrez implémenter une file d'attente vous-même.

Par exemple, cette mise en œuvre très simpliste:

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

---

Si vous voulez chaîne une autre fonction non définie dans foo, vous pouvez faire

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

Demonstration

Answer 2

Cela vous permettra d'enchaîner avec de multiples retards: 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();