clearInterval no funciona?

Question

Tengo un problema con este código, cuando hago clic en el botón de inicio, todo está funcionando como se esperaba, pero cuando quiero detener la animación con clearInterval, no funciona, simplemente sigue dando vueltas ... ¿Qué estoy haciendo mal?

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

Debe pasar una referencia (que obtiene de setInterval) al método clearInterval para borrarlo. Prueba este

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 función "setInterval()" rendimientos un valor. Eso es lo que necesita pasar a "clearInterval()", no una referencia al manejador.

Answer 3

¿Esto funciona para usted:

 
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); 
    }); 
}); 

Busca en esta referencia jsfiddle