(DOM)网页中的定时器功能

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_34203426

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量117

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/yagzh2000/archive/2013/05/20/3088271.html

本文介绍如何在网页中实现定时执行与过期执行功能，包括使用setInterval和setTimeout函数，以及如何正确关闭定时器以避免内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网页中有四个定时功能函数：

setinterval("要执行的函数",时间间隔)，返回值为定时器的ID.

clearinterval(定时器的ID),关闭定时器

以上的两个函数表示每隔多长时间就执行一次。

settimeout("要执行的函数",过期的时间),返回值为过期定时器的ID

cleartimeout(过期定时器的ID),关闭过期定时器

在调用setinterval时一定要记得关闭相应的ID，每调用一次就产生一个定时器。

settimeout是表示过多长时间后才能执行它指定的函数，和setinterval不一样，它只执行一次。

时间间隔的单位为微秒，即1秒＝1000微秒

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var intervalID,timeoutID;
        var i = 0;
        function startInterval() {
            intervalID = setInterval(getthevalue, 500);//每0.5秒就执行一次getthevalue
      }

      function getthevalue() {
          document.getElementById("txt").value = i;
          i++;
          if (i >= 100) {
              clearInterval(intervalID); //停止计时器
              document.getElementById("btn").value="计时结束"
          }
      }

      function begintimeout() {
          timeoutID = setTimeout(showdlg, 10000); //10秒后执行一次showdlg函数
      }
      function showdlg() {
          document.getElementById("txt").value = i;
          i++;
          if (i >= 100) {
              clearTimeout(timeoutID); //停止过期计时器
              document.getElementById("timeout").value = "计时结束";
          }
      }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="text" id="txt" />
    <input type="button" id="btn" value="计时开始" onclick="startInterval();" />
    <input type="button" id="timeout" value="执行" onclick="begintimeout();"/>
    </div>
    </form>
</body>
</html>