JavaScript timer
JavaScript timer
在JavaScript中创建了一个timer以在特定时间执行任务或任何功能。基本上，timer用于以规则的时间间隔延迟程序的执行或执行JavaScript代码。借助timer我们可以延迟代码的执行。因此，代码不会在事件触发或页面加载的同时完成它的执行。
timer的最佳示例是网站上的广告横幅，该横幅每2-3秒更改一次。这些广告横幅会在网站上定期更改。我们设置了一个时间间隔来更改它们。在本章中，我们将向您展示如何创建计时器。
JavaScript提供了两个timer功能
setInterval()和
setTimeout()，这有助于延迟执行代码，并允许重复执行一个或多个操作。我们将详细讨论计时器函数及其示例。
setInterval()和
setTimeout()，这有助于延迟执行代码，并允许重复执行一个或多个操作。我们将详细讨论计时器函数及其示例。
示例
下面是一些使用这些函数的JavaScript计时器示例。
setTimeout()
setTimeout()函数可帮助用户延迟执行代码。 setTimeout()方法接受两个参数，其中一个是用户定义的函数，另一个是延迟执行的时间参数。 time参数保存以毫秒为单位的时间(1秒= 1000毫秒)，可以选择传递该时间。
setTimeout()的基本语法为：
setTimeout(function, milliseconds)
我们将使用setTimeout()函数将消息的打印延迟3秒钟。该消息将在执行代码3秒钟后而不是立即显示在Web上。现在，让我们看下面的代码以了解其工作原理：
延迟后执行代码
<html>
<body>
<script>
function delayFunction() {
//display the message on web after 3 seconds on calling delayFunction
document.write('<h3> Welcome to lidihuo <h3>');
}
</script>
<b> Example of delay the execution of function <b>
<p id="t1"></p>
<button onclick = "setTimeout(delayFunction, 3000)"> Click Here </button>
</body>
</html>
输出
以上代码将在两个部分中执行。首先，将执行代码的HTML部分，在其中单击
Click Here
Click Here
Example of delay the execution of function
setInterval()
setInterval方法有点类似于setTimeout()函数。在一个时间间隔后，它将重复执行指定的功能。或者我们可以简单地说一个功能在用户为此功能提供的特定时间后重复执行。
例如-每五秒钟显示一次更新时间。
例如-每五秒钟显示一次更新时间。
setInterval()的基本语法是：
setInterval(function, milliseconds)
类似于setTimeout()方法，它也接受两个参数，其中一个是用户定义的函数，另一个是在执行该函数之前要等待的时间间隔参数。 time-interval参数保存以毫秒为单位的时间量(1秒= 1000毫秒)，可以选择是否传递。现在，请参见下面的代码，该功能的工作原理：
定期执行代码
<html>
<body>
<script>
function waitAndshow() {
//define a date and time variable
var systemdate = new Date();
//display the updated time after every 4 seconds
document.getElementById("clock").innerHTML = systemdate.toLocaleTimeString();
}
//define time interval and call user-defined waitAndshow function
setInterval(waitAndshow, 4000);
</script>
<h3> Updated time will show in every 4 seconds </h3>
<h3> The current time on your computer is: <br>
<span id="clock"></span> </h3>
</body>
</html>
输出
在执行上述代码时，响应将是一个简单的HTML语句，没有任何时间字符串，如下所示：
4秒钟后，JavaScript函数将调用并开始显示时间。这将每隔四秒重复显示您的系统时间。
示例
setInterval()方法的另一个示例，用于在每4秒连续显示一次消息字符串。
<html>
<body>
<script>
function waitAndshow() {
//display the message on web on calling delayFunction
document.write('<h3> Welcome to lidihuo <h3>');
}
</script>
<h3> A string will show in every 4 seconds </h3>
<!-- call user-defined delayFunction after 4 seconds -->
<button onclick = "setInterval(waitAndshow, 4000)"> Click Here </button>
</body>
</html>
输出
在执行上述代码时，带有按钮的消息将显示在浏览器上。单击此按钮可进行更多处理，然后查看下一步将发生什么。
A string will show in every 4 seconds
您已经了解了如何创建计时器或设置时间间隔。有时，我们需要取消这些计时器。 JavaScript提供了清除计时器的内置功能，如下所示：
取消或停止计时器
JavaScript提供了两个功能
clearTimeout()和
clearInterval()来取消或停止计时器并停止执行代码。 setTimeout()和setInterval()都返回唯一的ID。这些ID由clearTimeout()和clearInterval()使用以清除计时器并提前停止代码执行。它们都只使用一个参数，即ID。
clearTimeout()和
clearInterval()来取消或停止计时器并停止执行代码。 setTimeout()和setInterval()都返回唯一的ID。这些ID由clearTimeout()和clearInterval()使用以清除计时器并提前停止代码执行。它们都只使用一个参数，即ID。
示例
在此示例中，我们将使用clearTimeout()清除由with设置的计时器setTimeout()函数。看一下示例clearInterval()与setInterval()一起工作的方式。
禁用常规间隔
<html>
<body>
<script>
function waitAndshow() {
var systemdate = new Date();
document.getElementById("clock").innerHTML = systemdate.toLocaleTimeString();
}
function stopClock() {
clearInterval(intervalID);
}
var intervalID = setInterval(waitAndshow, 3000);
</script>
<p>Current system time: <span id="clock"> </span> </p>
<!-- button to stop showing time in a regular interval -->
<button onclick = "stopClock();" > Stop Clock </button>
</body>
</html>
输出
通过执行上述代码，当前系统时间将以3秒的固定间隔开始显示在Web上。此页面上还有一个禁用此计时器的按钮。
计时器将显示更新的时间每三秒钟之后。如果您点击此
停止时钟按钮，计时器将被禁用并停止显示更新的时间。
停止时钟按钮，计时器将被禁用并停止显示更新的时间。
