setInterval

天看了会关于js的，看到有setInterval方法，挺特别的，因而就写了个案例，

当点击start的时候 黑色边框的div的宽度就会一直增长，直到点击end中止，在此点击start会从新开始，text的值是setInterval返回的ID值

主要代码以下：

<div style="border:solid; width:20px; height:60px" id="a">d</div>
<input type="text"  id="txt1" />
<input type="text" id="txt2" />
<input type="button"  value="End" id="end"/>
<input type="button"   value="Start" id="start" />
<script>
function write_in(){
   var w =   $("#a").css("width");
   $("#a").css("width",(parseInt(w)+10))+'px';//div宽度增长10px
     
}
var aa;//setInterval返回的ID值
var tt;//setInterval是否执行
$("#start").click(function(){
    if(tt!==true){
  aa = self.setInterval("write_in()",50);
  tt = true;
  $("#txt1").val(aa) ;
    }
 })
$("#end").click(function(){
  $("#txt2").val(aa) ;
    window.clearInterval(aa);
   tt = false;
 })
</script>

刚作完后，有个问题，就是start点击大于1次以后，点击end就不起做用了，并且start点击的次数越多，div增长的越快，而且ID值也会增长。

就想到，多是每点击一次start,setInterval事件就增长了一次，添加一个boolean变量，判断若是有一个setInterval事件已经在执行，就不添加其余的，

 

OK问题解决，而且其ID值，也不会随着点击而增长  

 

还发现一个问题，即便你浏览器刷新了， setInterval的ID值，仍是停留在上一次的返回ID              

 

根据这个原理，还能够写一个ajax的页面实时更新的，这个还有待研究。。

============================================================ 
<input type="text" id="clock" size="35" />
<script type="text/javascript">
var int=self.setInterval("clock()",1000)
function clock()
  {
  var t=Math.random();
  document.getElementById("clock").value = t;
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });
  }
</script>
</form>
<button onclick="int=window.clearInterval(int)">
Stop interval</button>
//定时提交