php学习交流博客

好好写代码,好好痛她

setInterval与setTimeout

      刚刚老师特定的把setInterval与setTimeout讲个函数举例讲解了一下.
然后,也就只写了一个,验证了一下. 下面是代码:

  先来看看setInterval函数:

 1  <script>
 2     var time = setInterval("func()",1000);
 3     var count = 10;
 4     function func(){
 5         if(count != 0){
 6             document.getElementById("div1").innerHTML = count;;
 7             count--;   //当count--放在if里面的时候,执行完就会结束。
 8         }else{
 9             document.getElementById("div1").innerHTML = "<font size='20' color='red'>over</font>";
10             
11         }
12         //count--; //当count放在if外面的时候不断的继续执行setInterval函数
13     } 
14      // 上面的实例说明了setInterval函数是不断的周期的循环执行  那我们在看看setTimeout
15 
16   </script>
17   <div id="div1">setInterval测试</div>
18 

  从上面的实例,可能你已经感受到了setInterval函数的作用了.那我们在接着来看看setTimeout函数:

 1  <script>
 2     var timeOut = setTimeout("fun()",1000);
 3     var count = 10;
 4     function fun(){
 5         if(count != 0){
 6             document.getElementById("div2").innerHTML = count;
 7             count--;   //当程序执行的时候,setTimeout只是执行了一次,结果是10.就停止了.
 8                         //所以,说setTimeout只是执行一次。
 9             
10         }else{
11             document.getElementById("div2").innerHTML = "<font size='20' color='red'>over</font>";
12         }
13 
14     }
15   </script>
16   <div id="div2">setTimeout</div>

   通过上面的两个实例,已经很明显的看出来了setInterval与setTimeout的异同点了.

   但是,在上面的两个实例中要想用setTimeout实现与setInterval一样的效果怎么办呢
在上例中.只是在count--  后面添加了一个setTimeout("fun()",1000);就一样的效果了
还是看代码吧

 1  <script>
 2     var timeOut = setTimeout("fun()",1000);
 3     var count = 10;
 4     function fun(){
 5         if(count != 0){
 6             document.getElementById("div2").innerHTML = count;
 7             count--;   //当程序执行的时候,setTimeout只是执行了一次,结果是10.就停止了.
 8                         //所以,说setTimeout只是执行一次。
 9             setTimeout("fun()",1000);
10             //当setTimeout放在这里的时候可以实现setInterval一样的效果.但是只循环10就结束
11         }else{
12             document.getElementById("div2").innerHTML = "<font size='20' color='red'>over</font>";
13         }
14 
15     }
16   </script>
17   <div id="div2">setTimeout</div>

好了,不啰嗦了.


posted on 2010-03-17 10:28 王吉刚 阅读(1900) 评论(0)  编辑 收藏 引用 网摘 所属分类: hfphp


只有注册用户登录后才能发表评论。
网站导航: