JavaScript定时器setTimeout与clearTimeout

最新推荐文章于 2024-05-29 15:14:06 发布

weixin_34133829

最新推荐文章于 2024-05-29 15:14:06 发布

阅读量135

点赞数

原文链接：https://my.oschina.net/mpf/blog/526812

版权

为什么80%的码农都做不了架构师？>>>

将setTimeout写在函数外部

<!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;    // innerHTML是当前对象内部的内容
      num++;  // ++ 代表自增
    }
    setTimeout("myTime()",1000);  // 1000 等于 1秒，第二个参数的单位是毫秒
    // 最终运行结果是 页面显示 1 ，说明代码只执行了一次
  </script>
</body>
</html>

将setTimeout写入函数内部，则会调用函数的同时，再次调用定时效果，这样就会一直执行下去

<!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++;
      // 这里将定时函数写在了自定义函数内部
      setTimeout("myTime()",1000);
    }
    // 然后在外部调用自定义函数，使其执行
    myTime(); // 最终结果是：只要页面不关、不刷新，会一直执行下去，h3中的值会一直累加下去
  </script>
</body>
</html>

清除定时效果，使用clearTimeout()函数

<!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 id  = null; // 声明一个变量，目的是为了存放setTimeout()
    function myTime(){
      hid.innerHTML = num;
      id = setTimeout("myTime()",1000); // 存起来

      // 当 hid 中的值等于 5 的时候，停止setTimeout
      if(num == 5){
        clearTimeout(id); // 停止
      }
      num++;  // 为了让页面能显示出来 5 ，将num++放到最后，或者让 num == 6 num > 5
    }
    myTime();
  </script>
</body>
</html>

手动清除定时执行效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h3 id="hid">0</h3>
  <!-- onclick是写在行内的鼠标单击效果属性，引号内部是JavaScript代码 -->
  <button onclick="stopMyTime();">点击停止</button>
  <script type="text/javascript">
    var hid = document.getElementById("hid");
    var num = 1;
    var id  = null; // 声明一个变量，目的是为了存放setTimeout()
    function myTime(){
      hid.innerHTML = num;
      id = setTimeout("myTime()",1000); // 存起来
      num++;
    }
    myTime();

    function stopMyTime(){
      clearTimeout(id);
    }
  </script>
</body>
</html>

转载于:https://my.oschina.net/mpf/blog/526812