首页 > 编程语言 > 详细

JavaScript定时函数(2)setInterval与clearInterval

时间:2015-11-06 11:22:49      阅读:235      评论:0      收藏:0      [点我收藏+]

setInterval的使用方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h3 id="hid">0</h3>
  <script type="text/javascript">
    var hid = document.getElementById("hid");
    var num = 1;
    function myTime(){
      hid.innerHTML = num;
      num++;
    }
    setInterval("myTime()",1000); // setInterval是每隔time毫秒执行一次函数
  </script>
</body>
</html>



clearInterval清除定时效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h3 id="hid">0</h3>
  <script type="text/javascript">
    var hid = document.getElementById("hid");
    var num = 1;
    var sid = null; // 存放setInterval
    function myTime(){
      hid.innerHTML = num;
      if(num == 5){
        clearInterval(sid);
      }
      num++;
    }
    sid = setInterval("myTime()",1000); // 存储起来
  </script>
</body>
</html>



手动停止

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h3 id="hid">0</h3>
  <button onclick="clearInterval(sid)">点击停止</button>
  <script type="text/javascript">
    var hid = document.getElementById("hid");
    var num = 1;
    var sid = null; // 存放setInterval
    function myTime(){
      hid.innerHTML = num;
      num++;
    }
    sid = setInterval("myTime()",1000); // 存储起来
  </script>
</body>
</html>



setInterval和setTimeout的区别

  1. setTimeout是只执行一次,执行多次的效果是使用了递归的方法
  2. setInterval默认就是每隔多长时间执行一次函数,默认就是无限次调用

JavaScript定时函数(2)setInterval与clearInterval

原文:http://my.oschina.net/mpf/blog/526823

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!