动态更改 setInterval 值

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

读取您给它的计时值once，根据此计时进行安排，然后忘记它。如果您已将间隔分配给像

clearInterval(myInterval)

这样的变量，您唯一能做的就是

myInterval

。

setTimeout

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

setTimeout

的时间。

这是一个简单的例子。向左移动滑块可以加快滴答声，向右移动则可以减慢滴答声。

演示

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

用途：

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 处运行，则启动函数的最后一个参数是布尔值。

您还可以在这里找到脚本：

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);

Answer 4

您可以使用

usehooks-ts

库中的 useInterval

  // The counter
  const [count, setCount] = useState<number>(0)
  // Dynamic delay
  const [delay, setDelay] = useState<number>(1000)
  // ON/OFF
  const [isPlaying, setPlaying] = useState<boolean>(false)

  useInterval(
    () => {
      // Your custom logic here
      setCount(count + 1)
    },
    // Delay in milliseconds or null to stop it
    isPlaying ? delay : null,
  )

动态更改 setInterval 值

问题描述投票：0回答：4

4个回答

最新问题

动态更改 setInterval 值

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4