setInterval problem

setInterval problem

Hello all,


   I am still new at jQuery so here is a thing that didn't get. Why  am I getting  different results when the time out is more than a second, try 60 seconds (60000) and above ?? It wouldn't stop / clear the fading function right away. what is the logic or the behavier of setInterval function() ??? I am confused with this bug all day.


Here is the sample code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,  minimum-scale=1.0, maximum-scale=1.0" />
   <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://jplayer.org/latest/js/jquery.jplayer.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    
<script>
  $( document ).ready(function() {
 
 var c =false;
$( "#demo" ).hide(); 
myTimer() 
var myVar2 = setInterval(function(){ 

      if(c){ 
            clearInterval(myVar1)
            clearInterval(myVar2) 
             }
            
    }, 1000);
var myVar1 = setInterval(function(){myTimer()}, 6000);

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
   console.log("fading  started");
  document.getElementById("demo").innerHTML = t;
   
 $( "#demo" ).fadeIn(3000, function() {
  console.log("fade in complete");
     }); 
   $( "#demo" ).fadeOut(3000, function() {
  console.log("fade out complete");
     }); 
}

setTimeout(function(){myStopFunction()}, 60000);
function myStopFunction() {
   console.log("stop");
  c = true;
  $( "#demo" ).hide(); 
    
    }
    
    
});   
</script>

</head>
<body>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

 
</body>
</html>