本文详细介绍了JavaScript的setInterval函数，用于设定重复执行的定时任务。通过示例，展示了如何创建间隔、传递参数给函数以及如何使用clearInterval停止定时任务。此外，还对比了setInterval与setTimeout的区别，帮助理解两者在执行上的不同。
setinterval函数
JavaScriptprovides different function for the user experience. SetInterval() is a function used to specify the interval between given actions and fire these actions after specified intervals. In this tutorial, we will learn how to create intervals or delays for specified actions, functions and clear them.
JavaScript为用户体验提供了不同的功能。 SetInterval()是用于指定给定动作之间的间隔并在指定间隔后触发这些动作的函数。 在本教程中，我们将学习如何为指定的动作，功能创建间隔或延迟并清除它们。
SetInterval()语法 (SetInterval() Syntax)
We will first start by learning the SetInterval() function syntax.
首先，我们将学习SetInterval()函数的语法。
setInterval(CODE/FUNCTION,INTERVAL,PARAM1,...);
- `CODE/FUNCTION` is the code, action or function we want to fire after the specified delay “ CODE / FUNCTION”是我们要在指定的延迟后触发的代码，操作或功能
- `INTERVAL` is the delay or interval time we want to wait to fire code. DELAY value is specified in milliseconds which means to wait 3 seconds we should provide 3000 to the setInterval() function. “ INTERVAL”是我们要等待触发代码的延迟时间或间隔时间。 DELAY值以毫秒为单位指定，这意味着要等待3秒，我们应该为setInterval()函数提供3000。
- `PARAM1` is optional where it can be used to send parameter to the CODE/FUNCTION PARAM1是可选的，可用于将参数发送到CODE / FUNCTION
SetInterval()返回值 (SetInterval() Return Value)
After using the setInterval() function it will return a numeric value. This numeric value is the create interval instance ID which can be expressed as intervalID. IntervalID can be used to change settings like clearing the interval.
使用setInterval()函数后，它将返回一个数字值。 该数值是创建间隔实例ID，可以表示为intervalID 。 IntervalID可用于更改设置，例如清除间隔。
使用SetInterval()函数计时 (Timing with SetInterval() Function)
SetInterval() function is provided by the Window and Worker objects. We will start with a simple example. We will run the function named ChangeColor() in every 10 seconds which will print some text to the web browser console. We will use 10000 milliseconds to represent 10 seconds.
SetInterval()函数由Window和Worker对象提供。 我们将从一个简单的例子开始。 我们将每10秒钟运行一次名为ChangeColor()的函数，该函数会将一些文本输出到Web浏览器控制台。 我们将使用10000毫秒代表10秒。
<html>
<body>
<p>This Page Will Generate RandomNumbers with 10 seconds Interval</p>
<p id="demo"></p>
<script>
var myVar = setInterval(RandomNumber ,10000);
function RandomNumber() {
document.getElementById("demo").innerHTML+="<br>"+Math.random();
}
</script>
</body>
</html>
使用clearInterval()函数停止执行或计时器(Stop Execution or Timer with clearInterval() Function)
When the timer starts with SetInterval() function it will run forever unless we do not stop explicitly. We can stop the time with the clearInterval() function. In a web page, there may be more than one intervals set. So we have to provide the interval we want to stop or cancel by providing its IntervalID. In this example we will create a button which will call the clearInterval() function by providing the MyIntervalID like below.
当计时器以SetInterval()函数启动时，它将永远运行，除非我们没有明确停止。 我们可以使用clearInterval()函数停止时间。 在网页中，可能设置了多个时间间隔。 因此，我们必须通过提供其IntervalID来提供要停止或取消的间隔。 在此示例中，我们将创建一个按钮，通过提供如下所示的MyIntervalID来调用clearInterval()函数。
<html>
<body>
<p>This Page Will Generate RandomNumbers with 10 seconds Interval</p>
<button onclick="clearInterval(MyIntervalID)">Stop time</button>
<p id="demo"></p>
<script>
var MyIntervalID = setInterval(RandomNumber ,10000);
function RandomNumber() {
document.getElementById("demo").innerHTML+="<br>"+Math.random();
}
</script>
</body>
</html>
将参数传递给函数(Pass Parameters To The Function)
We can pass parameters to the delayed function. In this example, we will provide the name parameter to the interval function named PrintMyName().
我们可以将参数传递给延迟函数。 在此示例中，我们将名称参数提供给名为PrintMyName()的间隔函数。
<html>
<body>
<p>This Page Will Print Name As Parameter To The Delayed Function</p>
<p id="demo"></p>
<script>
setInterval(PrintMyName ,1000, "poftut.com");
function PrintMyName(myname) {
document.getElementById("demo").innerHTML+="<br>"+myname;
}
</script>
</body>
</html>
SetInterval()与SetTimeout()(SetInterval() vs SetTimeout())
JavaScript also provides the setTimeout() function in order to set delays between the execution of the given function or code. So which one should we use and what is the little difference between setInterval() and setTimeout() function. setInterval() function will run like a scheduled job every given interval without any latency but setTimeout() function is a bit different where function, code runs and then the given delay set again. If the function execution is 5 seconds and delays it 10 seconds the next start will take 15 seconds in total with the setTimeout() function.
JavaScript还提供了setTimeout()函数，以便设置在执行给定函数或代码之间的延迟。 因此，我们应该使用哪一个？ setInterval()和setTimeout()函数之间的区别是什么？ setInterval()函数将在每个给定的间隔内像计划的作业一样运行，没有任何延迟，但是setTimeout()函数在函数，代码先运行然后再重新设置给定延迟的情况下有所不同。 如果函数执行时间为5秒，并延迟10秒，则使用setTimeout()函数总共需要15秒才能进行下一次启动。
翻译自: https://www.poftut.com/javascript-setinterval-function-tutorial-with-examples/
setinterval函数
扫一扫
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
