javascript中setTimeout 和setInterval的区别

转载：

http://ljty11.blog.163.com/blog/static/109194141201011223161886/

window对象有两个主要的定时方法，分别是setTimeout 和 setInteval 他们的语法基本上相同，但是完成的功能取有区别。
　 setTimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。
　 setInterval方法则是表示间隔一定时间反复执行某操作。
　 如果用setTimeout实现setInerval的功能，就需要在执行的程序中再定时调用自己才行(setTimeout( ) 預設只是執行一次, 但我們可以使用一個循環方式, 使到一個setTimeout( ) 再啟動自己一次, 就會使到第二個 setTimeout( ) 執行, 第二個又啟動第三個, 這樣循環下去, 這 setTimeout( ) 就會不斷執行)。如果要清除计数器需要根据使用的方法不同，调用不同的清除方法：
var timeID = null;   
  
//timeout方法   
timeID=setTimeout('northsnow()',1000);   
clearTimeout(timeID);     
  
//interval方法   
timeID=setInterval('northsnow()',1000);   
clearInteval(timeID);  

 eg:

<script type="text/javascript">   
var count = 0;   
var timeID = null;   
function counter() {   
    count++;       
    $("#count").html(count + '%');   
    timeID = setTimeout("counter()", 1000);//注意:执行的函数需要加引号,否则会报错的
    if (count > 10) {   
        clearTimeout(timeID);   //注意:clearTimeout(timeID)必须位于setTimeout()之后,不能是之前,原因很容易呦!   
    }   
}   
$(function() {   
    counter();   
});   
</script>  

 

<script type="text/javascript">   
var count = 0;   
var timeID = null;   
function counter() {   
    count++;       
    $("#count").html(count + '%');   
    if (count > 10) {   
        clearInterval(timeID);   
    }       
}   
$(function() {       
    timeID = setInterval('counter()', 1000);  //注意:执行的函数需要加引号,否则会报错的 
       
});   
</script>  

    好了,基本原理明白了,剩下的就是自己灵活运用了,可以开发一些定时器或延时器之类的东东，如我的用法：

 

document.write('<script type="text/javascript" src="/images/js/jquery.floatDiv.js"></script>');
$(function(){
     $("#swt_box1").floatdiv('middle');
      $("#swtbox").floatdiv('middlebottom')
     $("#swt_close1").click(function(){$("#swt_box1").hide();});
     $("#swt_zx1").click(function(){$("#swt_box1").hide();});
    
     setInterval(function(){$("#swt_box1").show();},30000);
   
     });

var txt="";

function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n";
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l + "\n\n";
txt+="Click OK to continue.\n\n";
//alert(txt);
return true;
}

function message()
{
adddlert("Welcome guest!");
}
$(function(){
    
     $("#swtbox").floatdiv('middlebottom');
     setTimeout(function(){$("#swtbox").show();},1000);
     });