clearInterval non funziona?

Question

Ho qualche problema con questo codice, quando faccio clic sul pulsante Start tutto funziona come previsto ma quando voglio interrompere l'animazione con clearInterval non funziona, continua a fare il ciclo ... Cosa sto facendo male?

var a = function() { 
    $("div").animate({height:300},"slow"); 
    $("div").animate({width:300},"slow"); 
    $("div").animate({height:100},"slow"); 
    $("div").animate({width:100},"slow"); 
} 

$(document).ready(function(){ 
    $("start").click(function(){ 

     setInterval(a,1000); 
    }); 

    $("stop").click(function(){ 
     clearInterval(a); 

    }); 

}); 

Answer 1

È necessario passare un riferimento (che si ottiene da setInterval) al metodo clearInterval per cancellarlo. Prova questo

var intervalId; 
var a = function() { 
    $("div").animate({height:300},"slow"); 
    $("div").animate({width:300},"slow"); 
    $("div").animate({height:100},"slow"); 
    $("div").animate({width:100},"slow"); 
} 

$(document).ready(function(){ 
    $("#start").click(function(){ 
     intervalId = setInterval(a,1000); 
    }); 

    $("#stop").click(function(){ 
     clearInterval(intervalId); 
    }); 

}); 

Answer 2

La funzione "setInterval()" restituisce un valore. Questo è quello che devi passare a "clearInterval()", non un riferimento al gestore.

Answer 3

Fa questo lavoro per voi:

 
var chk = setInterval(a,1000); 
then 
clearInterval(chk); 

Answer 4

HTML

<div style="height:310px;width:310px;"> 
    <div id="div" style="width:100px;height:100px;background-color:#000"> 
    </div> 
</div> 

<input type="button" id="start" value="start"> 
<input type="button" id="stop" value="stop"> 

jQuery

var startInterval;

$(document).ready(function(){ 
    var a = function() { 
     $("#div").animate({height:300},"slow"); 
     $("#div").animate({width:300},"slow"); 
     $("#div").animate({height:100},"slow"); 
     $("#div").animate({width:100},"slow"); 
    } 
    $("#start").click(function(){ 
     startInterval=setInterval(a, 2500); 
    }); 

    $("#stop").click(function(){ 
     clearInterval(startInterval); 
    }); 
}); 

Check this out per riferimento jsfiddle