Javascript教程

JavaScript基础

JavaScript Objects

JavaScript BOM

JavaScript DOM

JavaScript OOP

JavaScript Cookies

JavaScript事件

JavaScript异常

JavaScript常用

<< JavaScript trim() JavaScript 数组删除 >>

JavaScript timer

在JavaScript中创建了一个timer以在特定时间执行任务或任何功能。基本上，timer用于以规则的时间间隔延迟程序的执行或执行JavaScript代码。借助timer我们可以延迟代码的执行。因此，代码不会在事件触发或页面加载的同时完成它的执行。

timer的最佳示例是网站上的广告横幅，该横幅每2-3秒更改一次。这些广告横幅会在网站上定期更改。我们设置了一个时间间隔来更改它们。在本章中，我们将向您展示如何创建计时器。

JavaScript 提供了两个timer功能 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

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>

<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()清除由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 onclick = "stopClock();" > Stop Clock </button>
</body>
</html>

输出

通过执行上述代码，当前系统时间将以3秒的固定间隔开始显示在Web上。此页面上还有一个禁用此计时器的按钮。

计时器将显示更新的时间每三秒钟之后。如果您点击此 停止时钟按钮，计时器将被禁用并停止显示更新的时间。

找工作要求35岁以下，35岁以上的程序员都干什么去了？

长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。

或许是选错了行业，程序员薪水虽高，但光鲜的外表下，背后的苦衷只有自己知道。三十多岁本该是一个人事业的黄金期，但技术变化日新月异，行业竞争异常残酷，对一个企业来说，永远有比你更年轻、劳动成本更低的人可以选择，这让你的中年危机提前到来。破局的智慧可以看看这本书！>>

<< JavaScript trim() JavaScript 数组删除 >>

昵称：邮箱：