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

});