setInterval() 方法用于在圆括号中作为参数指定的特定时间间隔后一次又一次地调用特定的代码块。 setInterval() 方法接受两个参数，第一个参数是需要反复执行的代码，第二个参数是需要再次执行代码的时间。
在本文中，我们将学习在运行时更改 setInterval() 方法的时间间隔的方法。这样，它将以不规则或可变的时间间隔执行给定的代码。
JavaScript 为我们提供了两种不同的内置方法来更改 setInterval() 方法的时间间隔，如下所示 –
-
使用clearInterval()方法。
-
使用 setTimeout() 方法。
让我们分别详细了解这两种方法的工作原理和实现。
使用clearInterval()方法
clearInterval()方法用于清除或停止之前执行的setInterval()函数。我们可以使用此方法来更改 seInterval() 方法的时间间隔，方法是在传递给 setInterval() 的函数内部调用此函数，它将清除先前调用的 setInterval() 方法并使用我们将在代码中定义新的时间值。
语法
以下语法将向您展示如何使用clearInterval()方法来清除之前的setInterval()方法 –
clearInterval( code to be executed, time interval );
让我们实际了解这个方法，并使用 JavaScript 中的clearInterval() 方法更改 setInterval() 方法的时间。
算法
-
步骤 1 – 在第一步中，我们将在 HTML 文档中添加两个不同的按钮，其中一个用于开始间隔，另一个用于停止间隔。< /p>
-
第 2 步 – 在此步骤中，我们将使用 JavaScript 中的 ID 从 HTML 文档中获取所有必需的元素，以在其中执行更改。
-
第3步 – 在下一步中，我们将定义一个JavaScript函数，其中首先使用clearInterval()方法清除之前的setInterval()，然后用一些新值，并使用我们在此步骤中定义的函数再次调用 setInterval() 方法。
-
第 4 步 – 在最后一步中，我们将定义另一个 JavaScript 函数，以使用clearInterval() 方法停止 setInterval() 的执行。
示例
下面的示例将帮助您通过深入研究代码来实际理解上述算法 –
<html>
<body>
<h2>Change the Time Interval of setinterval() Method at RunTime using JavaScript</h2>
<p id = "upper">The below text will print after a certain irregular interval of time every time.</p>
<button id = "btn" onclick = "start()"> Start Printing </button>
<button id = "stopbtn" onclick = "stop()"> Stop Printing </button>
<p id = "print1"> </p>
<p id = "result"> </p>
<p id = "print2"> </p>
<script>
var result = document.getElementById("result");
var upper = document.getElementById("upper");
var printVal1 = document.getElementById("print1");
var printVal2 = document.getElementById("print2");
var interval, t = 500;
function start() {
printVal1.innerHTML = " Printing Starts: ";
clearInterval(interval);
result.innerHTML += " Printed after: <b> " + t + " </b> time. <br> ";
t = t * 2;
interval = setInterval(start, t);
}
function stop() {
printVal2.innerHTML = " Printing Ends. ";
clearInterval(interval);
}
</script>
</body>
</html>
在上面的示例中，我们使用clearInterval()方法在运行时使用JavaScript更改setInterval()方法的时间间隔。
使用setTimeout()方法
setTimeout() 方法与 setInterval() 方法类似。它还会在特定时间间隔后调用一段代码，但与 setInterval() 不同，它只会执行代码一次，而不是一次又一次地执行。 setTimeout() 方法在执行一次代码后会自动停止，因此我们不需要像 setInterval() 方法那样调用clearInterval() 方法来停止执行前一个时间间隔。
语法
按照以下语法使用 setTimeout() 方法更改时间间隔 –
setTimeout( code to be executed, time interval );
现在让我们借助 JavaScript 代码示例了解此方法的实际实现。
算法
这个方法的算法和之前的方法几乎是一样的。您只需要执行一些小的更改，如下所示 –
-
从之前算法的start()函数中删除clearInterval()方法。
-
使用 setTimeout() 方法设置间隔变量的值，而不是具有相同参数的 setInterval() 方法。
示例
下面的例子将解释setTimeout方法的实际使用，并帮助您理解之前算法中的上述变化，您需要执行 –
<html>
<body>
<h2>Change the Time Interval of setinterval() Method at RunTime using JavaScript</h2>
<p id = "upper">The below text will print after a certain irregular interval of time every time.</p>
<button id = "btn" onclick = "start()">Start Printing</button>
<button id = "stopbtn" onclick = "stop()">Stop Printing</button>
<p id = "print1"> </p>
<p id = "result"> </p>
<p id = "print2"> </p>
<script>
var result = document.getElementById("result");
var upper = document.getElementById("upper");
var printVal1 = document.getElementById("print1");
var printVal2 = document.getElementById("print2");
var interval, t = 500;
function start() {
printVal1.innerHTML = " Printing Starts: ";
result.innerHTML += " Printed after: <b> " + t + " </b> time. <br> ";
t = t * 2;
interval = setTimeout(start, t);
}
function stop() {
printVal2.innerHTML = " Printing Ends. ";
clearInterval(interval);
}
</script>
</body>
</html>
在此示例中，我们使用 JavaScript 的 setTimeout() 方法来使用 JavaScript 更改运行时每次调用的时间间隔。
在本文中，我们了解了 setInterval() 方法更改时间间隔的两种不同方法。我们通过所需的理论详细讨论了这两种方法，并借助每种方法的单独代码示例来实际实现。
以上就是如何使用 JavaScript 在运行时更改 setinterval() 方法的时间间隔？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何使用 JavaScript 在运行时更改 setinterval() 方法的时间间隔？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
