JavaScript定时器原理详解

定时器基本概念

在JavaScript中，我们经常需要在一个间隔时间内循环执行某些任务或在某个时间点执行某些任务，这就需要用到定时器。

在JavaScript中，定时器有两种类型：setInterval和setTimeout，它们都是由浏览器提供的全局函数。

setInterval定时器可以按照一定的时间间隔执行代码，而setTimeout定时器则可以在一定时间后执行代码。

`setInterval`定时器

setInterval定时器是以循环的方式来执行代码段，代码会按照设定的时间间隔无限循环执行。格式如下：

setInterval(fn, interval)

其中：fn表示定时器到了规定的时间间隔后要执行的回调函数，而interval则表示时间间隔，以毫秒为单位。

下面是一个简单的例子，每隔1000ms就在div元素中输出一段文本。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>setInterval 定时器</title>
    <script type="text/javascript">
      window.onload = function () {
        var div = document.getElementById("my_div");
        setInterval(function () {
          div.innerHTML += "Hello World! ";
        }, 1000);
      };
    </script>
  </head>
  <body>
    <div id="my_div"></div>
  </body>
</html>

`setTimeout`定时器

setTimeout定时器是在指定时间后执行一次代码。即，当定时器计时器到达指定时间后，它会执行要调用的函数或代码。格式如下：

setTimeout(fn, delay)

其中：fn表示要执行的代码，delay表示延迟执行的时间，以毫秒为单位。

下面是一个简单的例子，将div元素中的文本改为"Hello World!"，但需要延时1秒后才执行。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>setTimeout 定时器</title>
    <script type="text/javascript">
      window.onload = function () {
        var div = document.getElementById("my_div");
        setTimeout(function () {
          div.innerHTML = "Hello World!";
        }, 1000);
      };
    </script>
  </head>
  <body>
    <div id="my_div">原始文本内容</div>
  </body>
</html>