JavaScript定时器示例

在前端，我们有很多功能需要用到定时器（Timing）。譬如轮询，譬如定时关闭弹框，譬如实现秒表，譬如一段时间后跳转页面等等。因此，我们需要掌握定时器的用法。

window对象提供有两个方法（也称为函数）来实现定时器的效果，分别是window.setTimeout()和window.setInterval()。

setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。使用格式：

var t = [window.]setTimeout(func|code [, delay, [param1, ...]]);

参数：

func|code：是将要推迟执行的函数名或者一段代码。

delay：是推迟执行的毫秒数。如果省略，则使用值0，意味着“马上”（尽快）执行。

param1：（可选）传给执行函数的其他参数——它们将依次传入推迟执行的函数（回调函数）。

返回值：一个数字，表示设置的计时器的超时ID值。将此值与clearTimeout()方法一起使用可取消计时器。每设置一个定时器，都要对应清除释放资源，若想取消setTimeout设置定时器，可用：clearTimeout(t);

setInterval()函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。使用格式：

var t = [window.]setInterval(func|code [, delay, [param1, ...]]);

每设置一个定时器，都要对应清除释放资源，若想取消setInterval设置定时器，可用：clearInterval(t);

特别提示： setInterval()会循环调用，setTimeout()只执行一次。

window.setInterval - Web API 接口参考 | MDN

window.setTimeout - Web API 接口参考 | MDN

例子1、setInterval()的例子，源码如下：

<html>
<head>
    <meta charset="utf-8">
    <title>Interval定时器示例</title>
</head>
<body>
<button onclick="stopInterval()">停止Interval</button>


<script>
    var intervalBox; 
    //设置interval定时器
    intervalBox = setInterval(showInterval, 500);//定时器间隔时间500ms
    function showInterval() {
        document.getElementById("demo").innerHTML =  new Date(); //演示interval定时器效果
    }	
     
    //结束interval定时器
    function stopInterval() {
        clearInterval(intervalBox);//清除interval定时器
    }

</script>

<p>interval定时器效果显示，请留意时间是变化的: </p>
<p id="demo"> </p>

</body>
</html>

保存文件名为：定时器例1.html

用浏览器运行测试之，效果如下：

例2、setTimeout()的例子，源码如下：

<html>
<head>
    <meta charset="utf-8">
    <title>Timeout定时器示例</title>
</head>
<body>
<button onclick="stopTimeout()">停止Timeout</button>

<script>
    var timeoutBox;
    //设置Timeout定时器
    timeoutBox = setTimeout(showTimeout, 500);//定时器间隔时间500ms
    function showTimeout() {
        document.getElementById("demo").innerHTML =  new Date(); //演示Timeout定时器效果
    }	
     
    //结束Timeout定时器
    function stopTimeout() {
        clearTimeout(timeoutBox);//清除Timeout定时器
    }
   
</script>

<p>Timeout定时器效果显示，请留意时间是不变的: </p>
<p id="demo"> </p>

</body>
</html>

保存文件名为：定时器例2.html

用浏览器运行测试之，效果如下：

例子3、用setInterval实现计数器功能，源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 用setInterval实现计数器功能</title>
</head>
<body>

<style>
#result {
   color: #ec181e;
   text-align:center; 
   font-size: 15vw;
   font-weight: 600;
   font-family: Lato;
   text-shadow: 0 6px 4px rgba(255, 100, 100, 0.6);
}
</style>
<h3>用setInterval实现计数器功能</h3>
<div id="result">0</div>
<button onclick="startCount()">开始计数</button>
<button onclick="stopCount()">停止计数</button>

<p>单击上方的"开始计数"按钮以启动计时器。</p>

<p>点击"停止计数"按钮停止计数。</p>

<p>单击"开始计数"按钮以再次启动计时器。</p>

<script>
var counter = 0;
var is_timer_on = false;
var t;

function timedCount() {
  document.getElementById("result").innerHTML = counter;
  counter++;
}

function startCount() {
  if (!is_timer_on) {
     is_timer_on = true;
     t = setInterval(timedCount, 1000);
  }
}

function stopCount() {
  clearTimeout(t);
  is_timer_on = false;
}
</script>

</body>
</html>

保存文件名为：计时器1.html

用浏览器运行测试之，效果如下：

例子4、用setTimeout实现计数器功能，源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 用setTimeout实现计数器功能</title>
</head>
<body>

<style>
#result {
   color: #ec181e;
   text-align:center; 
   font-size: 15vw;
   font-weight: 600;
   font-family: Lato;
   text-shadow: 0 6px 4px rgba(255, 100, 100, 0.6);
}
</style>

<h3>用setTimeout实现计数器功能</h3>
<div id="result">0</div>
<button onclick="startCount()">开始计数</button>
<button onclick="stopCount()">停止计数</button>

<p>单击上方的"开始计数"按钮以启动计时器。</p>

<p>点击"停止计数"按钮停止计数。</p>

<p>单击"开始计数"按钮以再次启动计时器。</p>

<script>
var counter = 0;
var is_timer_on = false;
var t;

function timedCount() {
  document.getElementById("result").innerHTML = counter;
  counter++;
  t = setTimeout(timedCount, 1000); //timedCount递归调用
}

function startCount() {
  if (!is_timer_on) {
     is_timer_on = true;
     timedCount();
  }
}

function stopCount() {
  clearTimeout(t);
  is_timer_on = false;
}
</script>

</body>
</html>

保存文件名为：计时器2.html

用浏览器运行测试之，效果如下：

JavaScript定时器示例

JavaScript定时器示例

猜你喜欢