Question

我想动态更改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>

Answer 1

诀窍是不使用setInterval，而是在循环中使用setTimeout。

setInterval读取你给它一次的时间值，根据这个时间安排，并忘记它。如果您已将间隔指定给clearInterval(myInterval)等变量，那么您唯一可以做的就是myInterval。

setTimeout大致相同，只是我们可以用它来手动循环同一个函数。手动循环允许我们在每次超时后更改setTimeout的时间。

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

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就不会发生这种情况。

文档：

Answer 2

这是一个没有setInterval的版本我总是使用：

function timer()
{
    var timer = {
        running: false,
        iv: 5000,
        timeout: false,
        cb : function(){},
        start : function(cb,iv,sd){
            var elm = this;
            clearInterval(this.timeout);
            this.running = true;
            if(cb) this.cb = cb;
            if(iv) this.iv = iv;
            if(sd) elm.execute(elm);
            this.timeout = setTimeout(function(){elm.execute(elm)}, this.iv);
        },
        execute : function(e){
            if(!e.running) return false;
            e.cb();
            e.start();
        },
        stop : function(){
            this.running = false;
        },
        set_interval : function(iv){
            clearInterval(this.timeout);
            this.start(false, iv);
        }
    };
    return timer;
}

用法：

var timer_1 = new timer();
timer_1.start(function(){
    //magic here
}, 2000, false);

var timer_2 = new timer();
timer_2.start(function(){
    //more magic here
}, 3000, true);

//change the interval
timer_2.set_interval(4000);

//stop the timer
timer_1.stop();

如果函数需要在0运行，则start函数的最后一个参数是布尔值。

您也可以在此处找到该脚本：https://github.com/Atticweb/smart-interval

Answer 3

这是动态更新间隔的另一种简便方法。

var intv_sec = 1500; // Initial interval in milliseconds
var speed = 1.5; // Multiplier

function chk_fn(){
  // Your code here
  console.log(intv_sec);
  
  
  // Reset and update interval
  clearInterval(chkh);
  intv_sec = intv_sec*speed;
  chkh = setInterval(chk_fn, intv_sec);
}

var chkh = setInterval(chk_fn, intv_sec);

动态更改setInterval值

3 个答案: