jquery - 为数组中的每个对象调用自定义函数

Question

我想要做的是按照更改列表中 id 的顺序对几个对象进行动画处理。但它似乎都_anim在同一时间运行。

我怎样才能按顺序运行它们？

$("#Sim2").click(function () {

   var change = [9,4];

   change.forEach(function (i) {
        _anim(i);
   });
});

var _anim = function (id) {
    $("#number"+id).animate({
         left: '50%',
    }, 500);
};

Answer 1

您可以使用递归函数..

小提琴在这里

function processElements(aRRay, k) {
    if (aRRay[k]) {
        $('#number' + aRRay[k]).animate({
            left: '50%'
        }, 500, function () {
            processElements(aRRay, k + 1)
        });
    }
}

$("#Sim2").click(function (e) {
    var change = [1, 2, 3];
    processElements(change, 0);
});

Answer 2

下面的函数_anim保证运行所有动画都是有序的。它从上一个的完成回调执行下一个动画。它还包括一个可选的回调函数，该函数在所有动画完成时执行。

这是实际的代码。http://jsfiddle.net/Hrkee/

$("#Sim2").click(function () {
    var change = [9,4];
    _anim(change, 0, { left: '50%' }, 500, function() { alert('all complete'); });
});


function _anim(aryKeys, index, properties, duration, callback) {
    $("#number" + aryKeys[index]).animate(properties, duration, function(){
        if(index + 1 <= aryKeys.length - 1){
            _anim(aryKeys, index + 1, properties, duration, callback);
        } else {
            if(callback)
                callback();
        }
    });
}

仅供参考，我从我写的关于同步加载异步 javascript 的博客文章中窃取了代码。http://www.mobtowers.com/load-cross-domain-javascript-synchronously-using-jquery/

Answer 3

使用 setTimeout

change.forEach(function (i) {
    setTimeout(function () {
        _anim(i);
    }, 500 * i);
});