Javascript-форум - обработка клика мыши при анимации

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - обработка клика мыши при анимации (https://javascript.ru/forum/jquery/22715-obrabotka-klika-myshi-pri-animacii.html)

обработка клика мыши при анимации

Неправильно работает код. Координата элемента id=div1 должна меняться от кликов мыши по этому элементу. По клику должна быть изменена переменная "с" , и её новое значение должно быть использовано в следующих циклах анимации. Но этого не происходит, переменная "с" не изменяется. Как здесь правильно связать функцию click и animate.

<script type="text/javascript">
$(document).ready(function(){
var c=0;
var X=0;
for(i=0;i<5;i++)
{
$("#div1").click(function(e){
var a = e.pageX - this.offsetLeft;
var b = e.pageY - this.offsetTop;
c=a+b;
})
X+=c;
$('#div1').animate( {left:X+"px"}, 5000);
}
})
</script>

Цикл for(i=0;i<5;i++) не ждёт пока анимация завершится.
Цикл мгновенно отрабатывает 5 раз и заканчивается, animate по сути 5раз получает одну команду, ты даже мышкой пошевелить неуспеваешь.
Дальше анимация ползёт сама по себе, ибо она привязана к таймеру. Ей начхать что твоя программа завершилась.

Чтобы работало, вместо цикла используй setInterval или лучше setTimeout с периодом 5000.
Либо юзай callback [вызов] по завершению анимации, из которого ты будешь запускать новую анимацию.

Вот те пример c callBack написанный от балды :)

//глобальная переменная X
X=0;

//обьявим счётчик количества повторений  анимаций.
i=0;

//обработчик события click
$("#div1").click(function(e){
    //обрати внимание x устанавливается внутри обработчика click а не снаружи.
    X = e.pageX;
     
    // я заремарил твой алгоритм вычисления, ибо не могу понять что он делает
    //var a = e.pageX - this.offsetLeft;
    //var b = e.pageY - this.offsetTop;
    //c=a+b;
    //X+=c;
})


//функция f будет вызываться когда анимация заканчивается, и запускать анимацию вновь, до тех пор пока i<5.
f=function(){
   // если i <5 тогда запустим анимацию, когда анимация закончится, она вызовет функцию f вновь
   if (i<5) $('#div1').animate( {left:X+"px"}, 5000,f); 

   // увеличим счётчик
   i=i+1;
}

//запустим анимацию
f();

В данном примере новая анимация должна начинаться, сразу же как заканчивается старая. Тобиш твой div поползёт от текущей координаты к координате x.

Это не так, я проверил методом alert; написал alert(c) в событии click и кликнул по элементу. значение "с" - определяется. но не изменяется вне события click. animate получает 5 разных значений при каждой отработке цикла : X+=c (проверял задавая ненулевое значение "с").тут наверно вопрос видимости переменной.переписал скрипт по-другому:

<script type="text/javascript">
var c=0;
var X=0;
var a=0;
var b=0;
$(document).ready(function(){
for(i=0;i<5;i++)
{
$("#div1").click(function(e){
a = e.pageX - this.offsetLeft;
b = e.pageY - this.offsetTop;
c=a+b;
})
X+=c;
$('#div1').animate( {left:X+"px"}, 5000);
}
})
</script>

вынес объявление переменных из события ready, она стала типа глобальной или не знаю как правильно тут сказать, но все равно код не работает.

Я и не говорил что цикл неработает, я говорю что цикл заканчивается быстрее чем анимация хотябы на пиксел сместится. Цикл отдал команду animate и фурычит дальше, а фурычит он быстро. Alert приостанавливает деятельность цикла, а вот animate нефига.

Рабочее демо,
песочница на сайте не работает, копируй в файл и пробуй.
Цикл в примере сделал бесконечным, а также ввёл Y чтобы демка была нагляднее.

<!DOCTYPE html>
<html>
   <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">

#div1 {
    position:absolute; 
    background-color:#abc; 
    left:50px;
    width:90px; 
    height:90px;
    margin:5px; 
}

</style>  

 </head>


<div id="div1"> </div>

<script>


//глобальная переменная X
X=0;
Y=0;

//обьявим счётчик количества повторений  анимаций.
i=0;

//обработчик события click
$(document).click(function(e){
    //обрати внимание x устанавливается внутри обработчика click а не снаружи.
    X = e.pageX;
    Y = e.pageY;       
})


//функция f будет вызываться когда анимация заканчивается, и запускать анимацию вновь, до тех пор пока i<5.
f=function(){
   // увеличим счётчик
   // в этом примере цикл у нас бесконечный
   i=i;
  
   // если i <5 тогда запустим анимацию, когда анимация закончится, она вызовет функцию f вновь
   if (i<5) $('#div1').animate( {left:X+"px",top:Y+"px"}, 500,f); 


}

//запустим анимацию
f();


</script>
   </body>
</html>

спасибо. мне, кстати, бесконечный цикл и нужен для программы:)