Question

幸运的是，这段代码似乎很好用，因为在我看来，它易于使用和理解：

.red {
  font-size: 70px;
  color: red;
}

<font id="test" size="7">0000000000000000</font>

$('#test').fadeOut(500, function() {
  const $this = $(this);
  $this.text('11111111111111111111')
  .fadeIn(500)
  .fadeOut(500, () => {
    $this.text('2222222222222222');
    $this.css("color", "green").addClass("red")
  })
  .fadeIn(500)
  .delay(500)
  .animate({
      'margin-left': '250px'
    }, {
      duration: 3000
  })
  .delay(1000)
  .fadeOut(500)
});

jsFiddle：http://jsfiddle.net/6cwustkr/1/

但是，我不明白它为什么起作用。 animate（）不是异步的吗？为什么即使最后的delay（）和fadeOut（）函数链接到animate（）而不是作为animate（）的回调函数放入，所有内容仍按正确的顺序执行？

Answer 1

因为这正是delay方法is intended to do的含义：

设置计时器以延迟队列中后续项目的执行。

这是一种特定于jQuery的方法，它允许延迟链接的jQuery调用。虽然您还可以提出一种方法，该方法通过将后面的函数放入fade和animate的回调中来实现相同的目的，但是如果您有很多这样的淡入淡出的话，它将变得很丑陋和动画。

这是一个可能的异步链接队列的示例，该队列具有与您感兴趣的行为相同的行为：

class Class {
  doSomething(fn) {
    const inst = this instanceof Child ? this : new Child();
    inst.queue.push(fn);
    if (!(this instanceof Child)) {
      inst.nextInQueue();
    }
    return inst;
  }
}
class Child extends Class {
  constructor() {
    super();
    this.queue = [];
  }
  nextInQueue() {
    if (this.queue.length) {
      const nextFn = this.queue.shift();
      Promise.resolve(nextFn())
        .then(() => this.nextInQueue());
    }
  }
  delay(ms) {
    this.queue.push(() => new Promise(res => setTimeout(res, ms)));
    return this;
  }
}

const c = new Class();
c
  .doSomething(() => console.log('something 1!'))
  .doSomething(() => console.log('something 2!'))
  .delay(1000)
  .doSomething(() => console.log('something 3'))

链fadeIn，fadeOut和异步animate（）函数

1 个答案: