javascript - javascript中断并继续循环

Question

如何在其中的“延迟”和“动画”运行时暂停/中断该循环，并在“动画”完成后从中断位置继续循环，以防止“i”变量被覆盖？或者也许还有其他方法可以防止在动画期间覆盖“i”变量？

for(i=0;i<inputs.length;i++){
    var now = inputs[i];
    var top = inputs[i].attr('top');
    if(!now.val()){
        if(dialog.css('display')=='none'){
            now.addClass('style');
            dialog.css('top',top).fadeIn(200);
        }
        else {
            dialog.delay(300).animate({"top": top}, 500, function(){
                now.addClass('style');
            });
        } 
    }
    else{
        now.removeClass('style');
    }
}

我不能在延迟和动画之前添加类，因为我需要在动画完成后添加延迟类。

Answer 1

通过调用相同的函数直到所有元素动画完成。

var i = 0;

function animate() {
   if (inputs.length == i) {
      return;
   }
   var now = inputs[i];
   var top = inputs[i].attr('top');
   if (!now.val()) {
      if (dialog.css('display') == 'none') {
         now.addClass('style');
         dialog.css('top', top).fadeIn(200, function(){
            animate(); // recall it after fadein
         });
      } else {
         dialog.delay(300).animate({
            "top": top
         }, 500, function () {
            now.addClass('style');
            animate();// recall it after animate complete
         });
      }
   } else {
      now.removeClass('style');
   }

   i++;
}
animate();