三分钟轻松理解和掌握js定时器

JavaScript 的各种功能有助于使网页的行为更具吸引力和便利性。如果您想在页面在浏览器中显示一段时间后更改显示，或者如果您想转换页面，您可以正确使用 setTimeout 和 setInterval 函数。

本文介绍如何使用定时器功能。

Javascript的setTimeout是一个定时器函数

使用计时器控制何时执行处理

setTimeout 是一个函数，当您想要在函数中指定的时间后执行特定操作时可以使用该函数。请注意，当达到设定的时钟时间时，它不起作用。

如果您希望 setTimeout 在指定的时间后只触发一次，并且希望它在指定的时间后运行多次，请使用另一个名为 setInterval 的函数。setInterval 加载后会继续无休止地执行，但您可以使用 clearInterval 函数停止计时器。

setTimeout 和 setInterval 是处理定时器的类似函数，但它们的使用方式不同。

js定时器相关阅读：js定时器详解！三分钟学会JavaScript定时器处理(setInterval、setTimeout)

setTimeout 函数的参数

setTimeout 函数有两个参数。第一个参数具有函数类型，即指定时间过后要执行的程序。第二个参数给出了开始执行第一个参数中设置的程序的时间。时间以毫秒为单位。如果您希望它在 1 秒后运行，则第二个参数的值为“1000”。

setInterval 函数是相同的，有两个参数，第一个指定要运行的程序，第二个指定运行的时间间隔（以毫秒为单位）。sclearInterval 函数只有一个参数。指定要停止的计时器。要指定它，您需要在一个变量中获取 setInterval 函数的返回值，并将其放入 clearInterval 函数的参数中。

使用 JavaScript 的 setTimeout

何时使用计时器

什么时候会使用 JavaScript 的 setTimeout？例如想在网页显示在屏幕上之后的时间不立即显示时，请将所需时间的毫秒数设置为第二个参数。

或者可以在等待更新服务器注册的状态时使用它。要让它在几秒钟后重新加载，可以使用 setTimeout 重新加载并检查服务器端的最新状态。

如果想在经过一定时间后退出，您也可以使用此功能。中途可以在输入画面操作时取消定时器，让定时器重新从头开始计时。

使用 setInterval 的时机通常在更改或移动屏幕上显示的内容时使用，例如在幻灯片放映中。只要您不使用 clearInterval 停止它，图像更改程序就会一直以相同的间隔运行，因此它就像幻灯片放映一样工作。

设置一个计时器

要设置 setTimeout 计时器，请按以下示例编写。

setTimeout(function(){console.log("经过了10秒")},10000);

如果函数在参数中，可读性会很低，因此您可以将函数放在变量中，如下例所示。

var fn = function() {
  console.log("经过了10秒");
};
var tm = 10000;
setTimeout(fn,tm);

这样可以更直观的看到。

取消定时器

如果要取消 setTimeout 计时器，请使用 clearTimeout 函数停止计时器。clearTimeout 需要 setTimeout 的返回值。让我们看看如何获取返回值并取消它。

var fn = function() {
  alert("经过了10秒");
};
var tm = 10000;
var id = setTimeout(fn,tm);
function clickStop (){
  clearTimeout(id);
}

"<a onclick="clickStop();">停止！" 从这个链接开始。这是一个程序，当您按下“停止！”按钮时停止计时器并且不显示警报对话框。重点是 setTimeout 的返回值存储在 clearTimeout 的变量“id”中。

相关阅读：完整的js倒计时代码,详解js倒计时功能

连续运行计时器（setInterval）

同样要设置 setInterval 计时器，请按以下示例编写。

var fn = function() {
  alert("10秒后(第"+i+"次)");
  i++;
};
var tm = 10000;
var i = 1;
setInterval(fn,tm);

setInterval 每 10 秒无休止地重复一次。

如果要限制 setInterval 的重复次数，请使用 clearInterval 取消计时器。即使是clearInterval，也需要setInterval的返回值，所以写和setTimeout一样的程序。让我们看一个例子。

var fn = function() {
	alert("10秒后(第"+i+"次)");
	if(i > 5) clearInterval(id);
	i++;
}
var tm = 10000;
var i = 1;
var id = setInterval(fn,tm);

在本例中5次循环后，计时器将在 clearInterval 处停止。变量“id”存储在 clearInterval 的参数中。