javascript - 延迟到方法链中的下一个函数

Question

我想了解更多关于 Javascript 中的方法链的知识，并且想知道在没有 jQuery 的情况下创建延迟到链中下一个函数的正确方法:

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

这并不容易做到。 jQuery 使用 specific queue system .

假设您想在没有 jQuery 的情况下执行此操作，则必须自己实现一个队列。

例如这个非常简单的实现:

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

---

如果你想链接另一个未在 foo 中定义的函数，你可以这样做

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

Demonstration