介绍Interval函数&关于setInterval函数的指南（附示例）介绍Interval函数在很多情况下，程序员需

setInterval Function

介绍Interval函数

在很多情况下，程序员需要在一个特定的时间间隔后重复运行一组命令。因此，现在运行一组特定的命令对程序员来说变得很困难，需要编写复杂的代码才能成功完成。这时，setInterval出现了，它可以帮助javascript程序员解决这个问题。使用简单的set interval语法，人们可以很容易地在一个特定的时间间隔后重复执行一组代码或一个函数。这使得这个方法对每个从事Java脚本工作的程序员都很重要。在这篇文章中，我们将通过不同的例子和对其工作原理的解释来详细说明设置间隔。

语法。

以下是设置Interval函数的基本语法。

setInterval(function, milliseconds)

对于更多的参数，语法将是。

setInterval(function, milliseconds, parameterA, parameterB, parameterC, ...)

这里。

函数是必须的，因为没有它，setInterval就无法设置，而且它是你想要执行的函数。
milliseconds也是一个重要的组成部分，因为没有它，setInterval也无法设置。它是用来设置一个人想要执行多少次代码的，基本上就是间隔时间。1000毫秒=1秒。
parameters, parameterB, parameterC, ...是可选组件。这些是传递给函数的额外参数。

监视的工作

setInterval()函数可以设置时间间隔。setInterval()可以简单地定义为一种方法，使我们可以在定义的时间段内重复调用函数。与setTimeout()函数相比，setInterval()函数的工作方式非常相似。setTimeout在一个实例中只工作一次，这意味着它在定义的时间间隔后只调用一个函数或一组代码，但setInterval()函数在定义的时间间隔后反复调用一个函数或一组代码。例如，如果我们要在网站上为访问者显示一条信息，每10分钟一次。现在，如果我们应用setInterval()函数，我们将成功地执行所需的结果，使其成为用户的良好用户体验。

函数setInterval的例子

以下是setInterval函数的例子。

例子 #1

在下面的例子中，SetInterval函数的基本例子是使用SetInterval函数来设置一个警报。当点击 "乘车 "按钮时，SetInterval函数被激活，从而以弹出窗口的形式显示一个警报，其信息如下面的输出所显示。这个警报会一直持续下去。

<!DOCTYPE html> <html> <body> <button onclick="course()">Take a Ride</button> <p>Visit our Website to Explore new and latest courses and Training Programs. So, click "Take a Ride" button to get a small guided tour.</p> <script> var training; function course() { training = setInterval(alertFunc, 2000); } function alertFunc() { alert("Lets take a ride to our website. \n www.educba.com \n We have started with text series as well"); } </script> </body> </html>

输出。

在代码执行中 -

setInterval Function-1

点击 "乘车 "按钮时----。

setInterval Function-2

例子 #2

在下面的例子中，手表和日期显示是用SetInterval函数创建的。在执行代码时，日期与当地IST的时间以及单独的时间显示在屏幕上。

<!DOCTYPE html> <html> <body> <m>***Date and Time right now are shown below.***</m> <p>___Also tells the best time to start your training.___</p> <p id="ree"></p> <p id="free"></p> <script> var EDUCBA = setInterval(watch, 1000); function watch() { var A = new Date(); var B = A.toLocaleTimeString(); document.getElementById("ree").innerHTML = A; document.getElementById("free").innerHTML = B; } </script> </body> </html>

输出。

setInterval Function-3

例子 #3

在下面的例子中，使用setInterval函数创建了手表和日期显示，使用clearInterval函数停止显示。在执行代码时，屏幕上显示了以当地IST为单位的日期和单独的时间。点击 "Let's Stop "按钮后，时间和日期都在这一时刻停止。

<!DOCTYPE html> <html> <body> <m>***Date and Time right now are shown below.***</m> <p>___Also tells the best time to start your training.___</p> <p id="ree"></p> <p id="free"></p> <button onclick="letsStopTime()">Let's Stop</button> <script> var EDUCBA = setInterval(watch, 1000); function watch() { var A = new Date(); var B = A.toLocaleTimeString(); document.getElementById("ree").innerHTML = A; document.getElementById("free").innerHTML = B; } function letsStopTime() { clearInterval(EDUCBA); } </script> </body> </html>

输出。

setInterval Function-4

例子 #4

在下面的例子中，SetInterval函数被用来以降序方式给条形图着色。点击 "Click to See Outcome "按钮，SetInterval函数被激活，显示一个持续下降的条形图，间隔时间为20毫秒，直到数值达到0。

<!DOCTYPE html> <html> <style> #Barbelow { position: relative; background-color: #f7e88f; height: 40px; width: 600px; border-color: #bc86e3; border-width: 200px; } #Barabove { background-color: #d45386; width: 10px; height: 40px; position: absolute; border-color: #252426; border-width: 200px; } </style> <body> <h1>If you don't work hard and smart. You will fall like this.</h1> <div id="Barbelow"> <div id="Barabove"> </div> </div> <br> <button onclick="EDUCBA()">Click to See Outcome</button> <script> function EDUCBA() { var training = document.getElementById("Barabove"); var width = 100; var id = setInterval(whole, 20); function whole() { if (width == 0) { clearInterval(id); } else { width--; training.style.width = width + '%'; } } } </script> </body> </html>

输出。

在代码执行时 -

output-5

点击 "点击查看结果 "按钮时------。

output-6

setInterval Function-7

总结

在这篇文章的基础上，我们了解了设置间隔的概念。我们通过不同的例子了解了设置间隔是如何工作的，以及如何根据代码的要求对其进行操作。这篇文章将帮助初学者理解设置间隔的用法，并在他们自己的代码中实现它。

介绍Interval函数&关于setInterval函数的指南（附示例）