-1

这不是重复的！

我有一段 JavaScript，我称之为“嵌套” setInterval；一个setInterval调用另一个函数的函数setInterval。

我想要的是当“内部”已经运行时“外部”setInterval调用该函数时，我希望“内部”停止它的原始间隔并重新开始。setIntervalsetInterval

所以：

  1. 外setInterval火。
  2. 外部setInterval调用函数与内部setInterval。
  3. 内setInterval火。

...内部运行一段时间

  1. 外部setInterval火灾......再次。
  2. 外部setInterval调用内部setInterval......再次
  3. 内部setInterval停止它的原始运行。
  4. InnersetInterval开始了全新的运行。

请参阅下面的示例：

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <style type="text/css">
                div {
                    margin: 100px 100px;
                }
            </style>
            <script type="text/javascript">
    
                let alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
    
                function start(){
                    var the_button = document.getElementById('the_button');
                    the_button.addEventListener('click', testFunction);
                }
    
                function testFunction(){
                    console.log("Starting ...");
                    if(myIntervalVal) clearInterval(myIntervalVal);
                    var myIntervalVal = setInterval(printAlphabet, 10000);
                }
    
                function printAlphabet(){
                    var i = 0;
                    console.log(alphabet[i]);
                    if(mySubInterval) clearInterval(mySubInterval);
                    var mySubInterval = setInterval(function(){
                        i++;
                        if(i === alphabet.length) i = 0;
                        console.log(alphabet[i]);
                    }, 1000);
                }
            </script>
        </head>
        <body onload="start();"><div><button type="button" id="the_button">click me</button></div></body>
    </html>

我觉得这应该起作用的方式是：

outer fires
    inner prints
    A
    B
    C
    D
    E
    F
outer is fired again
    inner stops printing
    inner prints
    A
    B
    C
    D
    E
    F
    ...

这不可能吗？

4

2 回答 2

0

虽然其他解决方案有效，但您不需要这样做；你应该只需要移动if(mySubInterval) clearInterval(mySubInterval);到printAlphabet()函数的底部。以前，您在声明 mySubInterval 之前检查它是否真实，但现在您的浏览器“知道”它是真实的并且会执行clearInterval()

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            .div {
                margin: 100px 100px;
            }
        </style>
        <script type="text/javascript">

            let alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];

            function start(){
                var the_button = document.getElementById('the_button');
                the_button.addEventListener('click', testFunction);
            }

            function testFunction(){
                console.log("Starting ...");
                if(myIntervalVal) clearInterval(myIntervalVal);
                var myIntervalVal = setInterval(printAlphabet, 10000);
            }

            function printAlphabet(){
                var i = 0;
                console.log(alphabet[i]);
                var mySubInterval = setInterval(function(){
                    i++;
                    if(i === alphabet.length) i = 0;
                    console.log(alphabet[i]);
                }, 1000);
                if(mySubInterval) clearInterval(mySubInterval);
            }
        </script>
    </head>
    <body onload="start();"><div class="div"><button type="button" id="the_button">click me</button></div></body>
</html>

于 2020-10-31T01:01:54.343 回答
0

它会起作用，但是您需要取消mySubInterval该printAlphabet功能。

var mySubInterval;
function printAlphabet(){
  var i = 0;
  console.log(alphabet[i]);
  if(mySubInterval) clearInterval(mySubInterval);
  mySubInterval = setInterval(function(){
    // …

同样的规则适用于myInterval和testFunction。

于 2020-10-31T00:58:09.040 回答