这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。
实际上,setTimeout和setInterval的语法相同。
它们都有两个参数,一个是将要执行的代码字符串,
还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。
不过这两个函数还是有区别的,setInterval在执行完一次代码之后,
经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。
下面我写了个控制浏览器转圈圈的效果,分别用了setTimeout和setInterval。你可以运行一下。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <input type="button" οnclick="beginnn()" value="我转圈圈,顺时针转圈圈,^v^" /><br> <input type="button" οnclick="interbegin()" value="我转圈圈,逆时针转圈圈,^v^" /><br> </body> </html> <script> var num=0; function beginnn(){ window.resizeTo(500, 450); window.moveTo(20, 20); setTimeout("two()",1000); //JS中setInterval、 setTimeout } function two(){ num++; window.moveTo(300, 20); setTimeout("three()",1000); } function three(){ num++; window.moveTo(300, 300); setTimeout("four()",1000); } function four(){ num++; window.moveTo(20, 300); setTimeout("back()",1000); } function back(){ num++; window.moveTo(20, 20); if(num<8){ setTimeout("beginnn()",0); }else{ num=0; } } var inum=0; var ter=null; function interbegin(){ inum++; window.resizeTo(500, 450); window.moveTo(20, 20); ter=setInterval("myinter()",1000); } function myinter(){ if(inum<=8){ if(inum%4==0){ inum++; window.moveTo(20, 20); }else if(inum%4==1){ inum++; window.moveTo(20, 300); }else if(inum%4==2){ inum++; window.moveTo(300, 300); }else if(inum%4==3){ inum++; window.moveTo(300, 20); }else{ inum++; window.moveTo(20, 20); } }else{ window.clearInterval(ter); inum=0; } } </script>