Остановить функцию, содержащую jQuery

Question

Мне нужно остановить выполнение функции PadanjeFun, когда ZivotBroj==-5.

Я попробовал jQuery stop() Метод, clearInterval(myVar) и возврат, но он не работает.

Мне нужно, чтобы остановить все дерево анимации (#cepJedan, #cepDva, #cepTri), когда ZivotBroj==-5

Вот код:

var PadanjeFun=function(){ 

if(bod==4) //Change speed when bod reaches the number 
{ 
    q=4; 
} 
else if(bod==7) 
{ 
    q=3; 
} 


$(document).ready(function(){ 

    setInterval(function(){ //Neka zakasni prvi cep 
     $("#cepJedan").animate({ 
      top: "850px", 
     },1000 * q, function(){ 
      BodRacunaj(); 
      document.getElementById("cepJedan").style.top = "150px"; 
      ZivotOduzmi(); 
      document.getElementById("Broj").innerHTML = bod; 
     }); 

     }, 1000); //Let it start after 1 sec 
    }); 

    $(document).ready(function(){ 

     setInterval(function(){ 
      $("#cepDva").animate({ 
       top: "850px", 
      },1000 * q, function(){ 
       BodRacunaj(); 
       document.getElementById("cepDva").style.top = "150px"; 
       ZivotOduzmi(); 
       document.getElementById("Broj").innerHTML = bod; 
      }); 

     }, 9000); //Let it start after 9 sec 
     }); 

    $(document).ready(function(){ 

     setInterval(function(){ 
      $("#cepTri").animate({ 
       top: "850px", 
      },1000 * q, function(){ 
       BodRacunaj(); 
       document.getElementById("cepTri").style.top = "150px"; 
       ZivotOduzmi(); 
       PadanjeFun(); 
       console.log("Q je: "+q); 
       document.getElementById("Broj").innerHTML = bod; 
      }); 

     }, 3000); //Let it start after 3 sec 
     }); 


} 

Вот функция ZivotOduzmi, если это поможет кто-нибудь:

var ZivotOduzmi=function(){ 
if((document.getElementById("cepJedan").style.top == "850px") && (document.getElementById("box").style.left == "550px") || (document.getElementById("box").style.left == "980px")) 
    { 
    zivotBroj--; 
    console.log("Imate jos ovoliko zivota: "+zivotBroj); 

    var element = document.getElementById('Zivot'); 
    element.style.width = (element.offsetWidth - 100) + 'px'; 

    } 
else if((document.getElementById("cepDva").style.top == "850px") && (document.getElementById("box").style.left == "120px") || (document.getElementById("box").style.left == "980px")) 
    { 
    zivotBroj--; 
    console.log("Imate jos ovoliko zivota: "+zivot); 

    var element = document.getElementById('Zivot'); 
    element.style.width = (element.offsetWidth - 100) + 'px'; 

    } 
else if((document.getElementById("cepTri").style.top == "850px") && (document.getElementById("box").style.left == "120px") || (document.getElementById("box").style.left == "550px")) 
    { 
    zivotBroj--; 
    console.log("Imate jos ovoliko zivota: "+zivotBroj); 

    var element = document.getElementById('Zivot'); 
    element.style.width = (element.offsetWidth - 100) + 'px'; 

    } 
} 

Answer 1

You необходимо присвоить setInterval переменной, например:

var anim3; 
$(document).ready(function(){ 

    anim3 = setInterval(function(){ 
     $("#cepDva").animate({ 
      top: "850px", 
     },1000 * q, function(){ 
      BodRacunaj(); 
      document.getElementById("cepDva").style.top = "150px"; 
      ZivotOduzmi(); 
      document.getElementById("Broj").innerHTML = bod; 
     }); 

    }, 9000); //Let it start after 9 sec 
    }); 

и вызвать

clearInterval(anim3); 
$("#cepDva").stop();