javascript - 动态更改 setInterval 值

我想动态更改 setInterval 的间隔值。由于 setInterval 回调函数中存在循环，我正在苦苦挣扎。我在stackoverflow上看到太多问题了。但是没有任何解决方案可以帮助我。如果有人知道答案，请举例说明。谢谢你。这是我的代码。

<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而是在一个循环中。

setInterval 读取您给它的时间值一次，根据这个时间安排，然后忘记它。如果您已将间隔分配给 myInterval 之类的变量，您唯一可以做的就是 clearInterval(myInterval)。

setTimeout 非常相似，除了我们可以使用它来手动循环相同的函数。手动循环允许我们在每次超时后更改 setTimeout 的时间。

这是一个简单的例子。将 slider 向左移动会使滴答声更快，向右移动则更慢。

DEMO

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 更好的选择。 setInterval 运行您的函数执行时间可能比间隔持续时间更长的机会。如果您在函数的最后调用 setTimeout，则循环 setTimeout 永远不会发生这种情况。

文档:

关于javascript - 动态更改 setInterval 值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30725455/

javascript - 动态更改 setInterval 值

上一篇：javascript - ES6 中的函数参数定义

下一篇：javascript - 为什么 JavaScript 调试器不在调试器语句处暂停？