爲數組中的每個對象調用自定義函數

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

使用的setTimeout

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

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

您可以使用一個遞歸函數..

小提琴HERE

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); 
});