Javascript 使用onComplete按顺序执行Fabric.js动画

我想要的是：

但我希望每个盒子都按顺序弹出，而不是一次全部弹出。我知道fabricjs对此具有onComplete属性。我对javascript不是很在行，我能找到的一个例子，这里：，对我来说不是那么透明。不过，我认为我有一个聪明的解决方案，让一个函数画一个方框，然后在完成时调用自己，如果调用了10次就什么也不做了。下面是代码和结尾的JSFIDLE：

var canvas = new fabric.Canvas('canvas1')

function drawbox(seq) {
    if (seq<11) {
        var rect=new fabric.Rect({
            left: seq*25+25,
            top: 10,
            fill: 'red',
            width: 0,
            height: 0,
        });

        canvas.add(rect)

        rect.animate('width',20, {
            onChange:canvas.renderAll.bind(canvas),
            duration: 1000,
            easing: fabric.util.ease.easeOutElastic,
        });

        rect.animate('height',20, {
            onChange:canvas.renderAll.bind(canvas),
            duration: 1000,
            easing: fabric.util.ease.easeOutElastic,
            onComplete: drawbox(seq+1)
        });
    }
}

drawbox(1)

var canvas=newfabric.canvas（'canvas1'）
功能抽屉（seq）{
如果（seq如果我猜，您希望一次为一个长方体设置动画，那么您应该使用settimeout函数

          var canvas = new fabric.Canvas('canvas1')

          function drawbox(seq) {
           if (seq<11) {
            var rect=new fabric.Rect({
              left: seq*25+25,
              top: 10,
              fill: 'red',
              width: 0,
              height: 0,
        });

        canvas.add(rect)
        setTimeout(function(){
        rect.animate('width',20, {
            onChange:canvas.renderAll.bind(canvas),
            duration: 1000,
            easing: fabric.util.ease.easeOutElastic,
        });

        rect.animate('height',20, {
            onChange:canvas.renderAll.bind(canvas),
            duration: 1000,
            easing: fabric.util.ease.easeOutElastic,
            onComplete: drawbox(seq+1)
        });
       },1000);     
    }
}

drawbox(1)

var canvas=newfabric.canvas（'canvas1'）
功能抽屉（seq）{
如果（seq问题是您传入的不是完整函数，而是其结果

rect.animate('height',20, {
   onChange:canvas.renderAll.bind(canvas),
   duration: 1000,
   easing: fabric.util.ease.easeOutElastic,
   onComplete: function() {
     // Here
     drawbox(seq+1);
   }
});

Sandeep的回答也是正确的，但这一点更接近我的初衷。谢谢。