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>
//定時提交