JavaScript定时函数（2）setInterval与clearInterval

时间 2019-11-08

标签 javascript 定时函数 setinterval clearinterval 栏目 JavaScript 繁體版

原文原文链接

setInterval的使用方法 javascript

<!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的区别

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