动态更改setInterval值 [英] Change setInterval value dynamically
问题描述
我想动态更改setInterval的间隔值。由于setInterval回调函数中存在循环，我正在努力。我在stackoverflow上看到了太多问题。但是没有任何解决方案可以帮助我。如果有人知道答案，那么请举例说明。谢谢。
这是我的代码。
I want to change interval value of setInterval dynamically. I'm struggling due to presence of a loop in setInterval callback function. I have seen too many questions on stackoverflow. But there is no any solution which can help me. If anyone know answer then please explain with an example. Thank You. Here is my code.
<html>
<head>
<script type="text/javascript">
var speed = 10;
function updateSlider(slideAmount) {
speed = slideAmount;
}
function load() {
downloadUrl("points.xml", function (data) {
/* code */
abc();
});
function abc() {
function track() {
/* code */
downloadUrl("points.xml", function (data) {
var xml = data.responseXML;
var points = xml.documentElement.getElementsByTagName("point");
var i = 0;
setInterval(function () {
if (i != points.length) {
alert(speed);
}
i++;
}, 100 * speed);
});
}
track();
}
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
request.onreadystatechange = function () {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.setRequestHeader("Content-type", "text/xml");
request.send(null);
}
function doNothing() {
}
</script>
</head>
<body onload="load();">
<div id="slider">
5% <input id="slide" type="range" min="1" max="20" step="5" value="10" onchange="updateSlider(this.value)" /> 200%
</div>
<div id="chosen">10</div>
</body>
推荐答案
诀窍是不使用 setInterval ，并使用 setTimeout 。
The trick is to not use setInterval, and to use setTimeout in a loop instead.
setInterval 读取你给它一次的时间值，根据这个时间安排，并忘记它。如果你已经将时间间隔分配给像 myInterval 这样的变量，那么你唯一可以做的就是 clearInterval（myInterval）。
setInterval reads the timing value you give it once, schedules based on this timing, and forgets about it. The only thing you can do is clearInterval(myInterval) if you've assigned your interval to a variable like myInterval.
setTimeout 大致相同，只是我们可以用它来手动循环同一个函数。手动循环允许我们在每次超时后更改 setTimeout 的时间。
setTimeout is much the same, except we can use it to manually loop on the same function. Manually looping allows us to change the timing of setTimeout after each timeout.
这是一个简单的例子。将滑块向左移动会使得滴答更快，而向右移动则更慢。
Here's a quick example. Moving the slider to the left makes the ticking faster, and to the right, slower.
var timing = 250,
i = 0,
output = document.getElementById('output');
function loop() {
i++;
output.innerHTML = i;
window.setTimeout(loop, timing);
}
document.querySelector('input[type="range"]').addEventListener('change', function (e) {
timing = parseInt(this.value);
});
loop();
<input type="range" min="100" max="500" value="250" />
<div id="output"></div>
作为旁注：使用此模式几乎总是比使用 setInterval <更好的选择/ code>。 setInterval 运行您的函数执行可能需要比间隔持续时间更长的机会。如果你在函数中最后调用 setTimeout ，那么循环 setTimeout 就不会发生这种情况。
As a side note: Using this pattern is almost always a better option than using setInterval. setInterval runs the chance that your function execution could take longer than the duration of the interval. This never happens with a looping setTimeout if you call setTimeout last in the function.
文档：
- WindowTimers.setInterval
- WindowTimers.setTimeout
这篇关于动态更改setInterval值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
