параметр Pass анимировать функцию обратного вызова

Question

У меня есть следующий фрагмент кода JQuery, и я пытаюсь передать параметр в зависимости от метода одушевленным, но не может получить это право.

function move() { 

    var points = [13, 8, 5]; 

    for(var pointIdx=0; pointIdx < points.length-1; pointIdx++) { 
     .. 
     .. 

     // animate move.   
     $('#my_id', gameWindow.document).animate({ left: "50px" ,top: "50px" }, 1500, 'linear', 
      function(pointIdx) { 
       console.log("Animation: Iteration=" + pointIdx); // pointIdx is undefined at this point, why? 
       ... 
       ... 
      } 
     ) 
    } 
} 

Как это сделать правильно?

Спасибо!

Answer 1

pointIdx не определено, поскольку полный обратный вызов для анимации jQuery не имеет параметров, доступных для использования.

http://api.jquery.com/animate/

полный
Тип: Function()
Функция вызываемая после завершения анимации.

Итак, когда вы включите параметр pointIdx в функции обратного вызова одушевленные полной, как этот

function(pointIdx) { 

вы перезапись переменная pointIdx. Поскольку JavaScript использует стек лексической переменную среду, pointIdx проталкиваются в стек с значением, переданным в от полного обратного вызова. Это значение undefined, и при попытке прочитать значение переменной pointIdx внутри контекста выполнения полного обратного вызова, он получает самое верхнее значение стеки, который undefined. Вот почему pointIdx здесь не определено.

Чтобы сохранить значение pointIdx внутри этого обратного вызова, вам необходимо удалить его из параметров, а также вам нужно закрыть его с помощью IIFE.

jsFiddle Demo

for(var pointIdx=0; pointIdx < points.length; pointIdx++) { 
    .. 
    .. 

    // animate move.   
    //close over pointIdx 
    (function(pointIdx){ 
    //now the execution context is inside of the anonymous function 
    //and the value of pointIdx in the loop is stored in 
    //variable pointIdx (same name for consistency) is at the top of that variable environment 
    $('#my_id', gameWindow.document).animate({ left: "50px" ,top: "50px" }, 1500, 'linear', 
     function() { 
      console.log("Animation: Iteration=" + pointIdx); // pointIdx will now contain the iteration value from the for loop 
      ... 
      ... 
     } 
    ) 
    })(pointIdx); 
} 

Answer 2

Проблема синхронизации - анимация обратного вызова происходит после 1500 мс, но ваш цикл завершается практически мгновенно. Вам нужно переписать так:

var points = [13, 8, 5]; 
var pointIdx = 0; 

function animateForPointIndex(index) { 
    $('#my_id').animate({ 
     left: "50px", 
     top: "50px" 
    }, 1500, 'linear', function() { 
     pointIdx++; 
     if (pointIdx < points.length) { 
      console.log("Animation: Iteration=" + pointIdx); 
      // do what you need to here 
      animateForPointIndex(pointIdx); 
     } 
    }); 
} 
animateForPointIndex(0); 

Функция одушевленные вызывается рекурсивно после каждого завершения, только если индекс точки меньше, чем длина массива точек.