JavaScript 定时器

699 阅读2分钟

前言

什么是定时器?JS提供了一些原生方法来实现延时去执行某一段代码。下面来简单介绍一下 setTimeout,setInterval 定时器。

setTimeout

用于在一段时间后仅执行一次函数或指定的代码段。

语法

window.setTimeout(function, milliseconds)
  • 第一个参数是要执行的函数。
  • 第二个参数指示执行前的毫秒数(1秒= 1000毫秒)。

示例:单击按钮2秒钟后将显示提示消息

<!DOCTYPE html>
<html>
<title></title>
<body>

<p>等待2秒后,点击第一个按钮,提示"Hello world"。</p>
<p>点击第二个按钮,防止第一个函数执行。(必须在2秒之前点击)</p>
<button onclick="myFunc()">点击</button>
<button onclick="myStopFunc()">停止alert</button>

<script>
var t;

function myFunc() {
  t = setTimeout(function(){ alert("Hello world"); }, 2000);
}

function myStopFunc() {
  clearTimeout(t);
}
</script>

</body>
</html>

停止执行: clearTimeout() 方法停止执行setTimeout()中指定的函数。

window.clearTimeout(var)

clearTimeout() 方法使用从setTimeout()返回的变量。

t = setTimeout();

clearTimeout(t);

如果尚未执行该函数,则可以通过调用clearTimeout() 方法来停止执行。

setInterval

按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

语法:

window.setInterval(function, milliseconds)
  • 第一个参数是我们要执行的函数
  • 第二个参数指示每次执行之间的时间间隔的长度。

示例:每秒执行一次称为“ startTimer”的功能

<!DOCTYPE html>
<html>
<title></title>
<head>

<style>
#result {
   display: flex;
   justify-content: center;
   color: #ec181e;
   font-size: 25vw;
   font-weight: 900;
   text-shadow: 0 6px 4px rgba(255, 100, 100, 0.6);
}
</style>
</head>
<body>

<div id="result">00:00:00</div>
<button onclick="stopTimer()">停止时间</button>

<script>
// 每1秒执行一次startTimer()
var t = setInterval(startTimer, 1000);

function startTimer() {
  var date = new Date();
  document.getElementById("result").innerHTML = date.toLocaleTimeString();
}

// 取消使用setInterval()创建的重复动作
function stopTimer() {
   clearInterval(t);
}
</script>

</body>
</html>

停止执行 clearInterval() 方法停止执行 setInterval() 中指定的函数。

window.clearInterval(var)

clearInterval() 方法使用从setInterval()返回的变量。

t = setInterval();

clearInterval(t);

区别:

  • setTimeout 允许设置一个超时对象,超时后执行这个对象,但是只执行一次,无周期。
  • setInternval 允许设置一个超时对象,超时后执行这个对象,周期等于超时对象指定的时间,周期为无限循环。