javascript - 在 JQuery 动画循环中，在所有动画完成后运行函数

Question

我有一个循环，通过获取数组形式的值来动画 16 个不同的元素。该部分有效，并且目前动画正常。

我想在每个动画完成后调用一个函数。

//loop through the grid
    for (var y = 0; y < grid.length; y++) {
        for (var x = 0; x < grid[y].length; x++) {

            //if its not an empty space
            if (grid[y][x].type != 0) {

                $('#ent'+grid[y][x].entNum).animate({
                    left: (x*16*zoom)+'px',
                    top: ((1+(+y))*16*zoom)+'px'
                },{duration: 100,queue:false,complete:function(){ //end of animation
                    //doesn't really work here
                    okayToMove = true;
                }});

            }
        }
    }

你可以看到我想在动画完成后设置okayToMove = true，但就我目前的情况而言，它将设置该变量16次，并且在第一个完成后它将为true，而不是第一个最后一张。

有什么想法吗？

Answer 1

您可以使用 jQuery $.Deferred 来实现此目的

var deferreds = [];


//loop through the grid
    for (var y = 0; y < grid.length; y++) {
        for (var x = 0; x < grid[y].length; x++) {

            //if its not an empty space
            if (grid[y][x].type != 0) {
                var def = new $.Deferred();    
                deferreds.push(def);
                (function(defferdToResolve){
                   $('#ent'+grid[y][x].entNum).animate({
                    left: (x*16*zoom)+'px',
                    top: ((1+(+y))*16*zoom)+'px'
                    },{duration: 100,queue:false,complete:function(){ //end of animation
                    //doesn't really work here
                    defferdToResolve.resolve();
                    }});
                })(def);


            }
        }
    }

这将是所有 promise 都得到解决时的处理程序(即所有动画都调用回调)。

$.when.apply($, deferreds).done(function(){
  alert('All animations are done at this point!');
});

为了更好地说明 $.Deferred，这里是 codepen