Javascript Setinterval在特定的时间间隔内调用一个函数

Javascript可以在特定时间间隔内执行一段代码块。这些时间间隔被称为时间事件。通常有两种方法可以实现。根据你的要求可以具体使用这两种方法。这两种方法分别为:

setInterval()
setTimeout()

在这里，我们将讨论javascript中的setInterval()方法。所以，让我们开始吧。

setInterval()方法的主要功能是在特定的时间间隔内调用一个函数，通常以毫秒为单位，来评估一个表达式。setInterval()函数会继续调用该函数，直到窗口使用clearInterval()函数关闭。然后，setInterval()方法返回的值作为clearInterval()方法的参数。

如果我们只想在指定的毫秒数之后执行一次该函数，我们将使用setTimeout()来定义。

1000毫秒=1秒

Javascript中的setInterval()方法以定义的重复间隔执行一段代码块。

语法

setInterval(function, milliseconds);

function : 包含可执行代码块

milliseconds : 函数执行的时间间隔

示例代码

function Display()
{
    console.log("Hello JavaTpoint");
}

setInterval(Display, 2000);

在上面的代码中，setInterval函数设置为2000毫秒，即2秒。因此，它会每隔2秒调用Display()函数，并且输出会每隔2秒连续显示，如下所示。

Hello JavaTpoint
Hello JavaTpoint
Hello JavaTpoint
.
.
...

还有一些不同的方法可以自定义你的函数。比如考虑下面的示例。

var myVar;

function Example() 
{
  myVar = setInterval(shock, 3000);
}

function shock() 
{
  alert(" Hi ! ");
}

在上面的代码中，我们定义了两个函数。第一个函数将第二个函数作为参数，并在其中的块中每3秒执行一次。我们还定义了一个变量 myVar 作为一个临时变量用于存储间隔。上述代码的输出将以弹出窗口的形式显示在浏览器中，消息为”Hi!”。 setInterval() 方法将会重复执行，直到使用 clearInterval() 方法停止。为了说明这一点，考虑下面的示例代码。

var logic = setInterval(Time, 2000);

function Time() {
  var x = new Date();
  var y = x.toLocaleTimeString();
  }

function FunctionStop() {
  clearInterval(logic);
}

在上面的代码中，我们定义了一个名为logic的变量，它的间隔被设置为每2秒。在给定的函数中，我们还定义了两个变量x和y，它们将以整数和字符串的形式存储数据和时间。每当您调用Time函数时，它将每2秒显示当前时间，并且clearInterval()方法将在每个时间间隔后擦除时间，以防止显示先前的时间。这将导致时间以秒为单位的变化，因此不需要手动任务来删除之前显示的时间。输出的结果将类似于这样。

1:47:41 AM
1:47:43 AM
1:47:45 AM
1:47:47 AM
1:47:49 AM

在上面展示的两个示例中，我们讨论了可以使用的基本间隔方法。可以使用HTML和CSS自定义setInterval()方法。我们可以通过HTML网页更改显示的颜色或动态定义它们。

考虑下面的代码：

var display = setInterval(() => { 
  Color() 
}, 500);

function setColor() {    
  var a = document.body;    
  a.style.backgroundColor = a.style.backgroundColor == "yello" ? "red" : "green";
}

function ColorStop() {
  clearInterval(display);
}

在上面的代码片段中，我们定义了一个变量 display() ，该函数将在每500毫秒后显示颜色。另一个函数 setColor() 将在每个时间间隔之后将网页的背景色设置为指定的颜色。下一个函数ColorStop()用于在每个时间间隔后停止定时器。每当调用display()函数时，另一个函数会在500毫秒的时间间隔内开始执行，并且在每个时间间隔后会自动更改颜色。很容易理解，颜色将从红色、绿色或黄色等背景色进行更改。