Fatal编程技术网

JavaScript设置间隔未停止

javascript jquery

JavaScript设置间隔未停止,javascript,jquery,setinterval,clearinterval,Javascript,Jquery,Setinterval,Clearinterval,我正在使用setInterval（）运行JavaScript计时器。我想运行计时器5秒，然后从零秒开始重新启动计时器，同样的过程应该运行3次 <!DOCTYPE html> <html> <head> <title>Jquery setinterval stop after sometime</title> </head> <body> <p>Counter: <span id

我正在使用setInterval（）运行JavaScript计时器。我想运行计时器5秒，然后从零秒开始重新启动计时器，同样的过程应该运行3次

<!DOCTYPE html>
<html>
<head>
    <title>Jquery setinterval stop after sometime</title>
</head>
<body>

    <p>Counter: <span id="counter"></span></p>
    <p>Seconds: <span id="seconds"></span></p>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            var start_secs;
            var counter = 0;
            function intervalFunc(){
                var seconds = 0;
                $('#counter').html(counter);
                start_secs = setInterval(function(){
                    $('#seconds').html(seconds);
                    if(seconds===5){
                        if(counter < 3){
                            intervalFunc();
                        }else{
                            console.log('else');
                            clearInterval(start_secs);
                            seconds=0;
                            return false;
                        }
                    }
                    seconds++;  
                }, 1000);
                counter++;
            }

            intervalFunc();
        });
    </script>


</body>


Jquery setinterval在某个时间后停止
柜台：

秒数：

$（文档）.ready（函数（）{
var启动秒；
var计数器=0；
函数intervalFunc（）{
var秒=0；
$（'#counter'）.html（counter）；
start_secs=setInterval（函数（）{
$（'#seconds'）.html（秒）；
如果（秒===5）{
如果（计数器<3）{
intervalFunc（）；
}否则{
console.log（'else'）；
清除间隔（开始秒）；
秒=0；
返回false；
}
}
秒++；
}, 1000);
计数器++；
}
intervalFunc（）；
});
在
计数器
值小于3之前，上述代码计时器工作正常，但在此之后，setInterval（）继续运行，甚至在使用clearInterval（）时也不会停止


是否有人能指出给定代码中的问题，即为什么
setInterval（）
在
计数器值大于或等于3之后没有停止？
在调用
intervalFunc（）
之前，必须清除上一个计时器。因为每个计时器都分配给同一个变量，所以计时器在后台运行，因此无法清除这些计时器

检查代码中的更改：


<!DOCTYPE html>
<html>
<head>
    <title>Jquery setinterval stop after sometime</title>
</head>
<body>

    <p>Counter: <span id="counter"></span></p>
    <p>Seconds: <span id="seconds"></span></p>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            var start_secs;
            var counter = 0;
            function intervalFunc(){
                var seconds = 0;
                $('#counter').html(counter);
                start_secs = setInterval(function(){
                    $('#seconds').html(seconds);
                    if(seconds===5){
                        clearInterval(start_secs);
                        if(counter < 3){
                            intervalFunc();
                        }else{
                            console.log('else');
                            seconds=0;
                            return false;
                        }
                    }
                    seconds++;  
                }, 1000);
                counter++;
            }

            intervalFunc();
        });
    </script>


</body>




Jquery setinterval在某个时间后停止
柜台：

秒数：

$（文档）.ready（函数（）{
var启动秒；
var计数器=0；
函数intervalFunc（）{
var秒=0；
$（'#counter'）.html（counter）；
start_secs=setInterval（函数（）{
$（'#seconds'）.html（秒）；
如果（秒===5）{
清除间隔（开始秒）；
如果（计数器<3）{
intervalFunc（）；
}否则{
console.log（'else'）；
秒=0；
返回false；
}
}
秒++；
}, 1000);
计数器++；
}
intervalFunc（）；
});

在调用
intervalFunc（）
之前，必须清除上一个计时器。因为每个计时器都分配给同一个变量，所以计时器在后台运行，因此无法清除这些计时器

检查代码中的更改：


<!DOCTYPE html>
<html>
<head>
    <title>Jquery setinterval stop after sometime</title>
</head>
<body>

    <p>Counter: <span id="counter"></span></p>
    <p>Seconds: <span id="seconds"></span></p>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            var start_secs;
            var counter = 0;
            function intervalFunc(){
                var seconds = 0;
                $('#counter').html(counter);
                start_secs = setInterval(function(){
                    $('#seconds').html(seconds);
                    if(seconds===5){
                        clearInterval(start_secs);
                        if(counter < 3){
                            intervalFunc();
                        }else{
                            console.log('else');
                            seconds=0;
                            return false;
                        }
                    }
                    seconds++;  
                }, 1000);
                counter++;
            }

            intervalFunc();
        });
    </script>


</body>




Jquery setinterval在某个时间后停止
柜台：

秒数：

$（文档）.ready（函数（）{
var启动秒；
var计数器=0；
函数intervalFunc（）{
var秒=0；
$（'#counter'）.html（counter）；
start_secs=setInterval（函数（）{
$（'#seconds'）.html（秒）；
如果（秒===5）{
清除间隔（开始秒）；
如果（计数器<3）{
intervalFunc（）；
}否则{
console.log（'else'）；
秒=0；
返回false；
}
}
秒++；
}, 1000);
计数器++；
}
intervalFunc（）；
});

有几个问题。主要的一点是，
start\u seconds
需要是函数的本地值，而不是在函数外部声明-您希望在函数内独立控制每个间隔。按照你的方式，你失去了对早期人的参考。当
秒==5时，无论
计数器是否<3
都要清除间隔，因为您正在启动一个新的计数器

大概是这样的：



var计数器=0；
函数intervalFunc（）{
var秒=0
var start_secs=setInterval（函数（）{
console.log（秒）
如果（秒===5）{
如果（计数器<3）{
intervalFunc（）；
}
//5次后，清除间隔
//如果计数器<3，则启动新的计数器
清除间隔（开始秒）；
返回
}
秒++；
}, 500);
计数器++；
}

intervalFunc（）有几个问题。主要的一点是，
start\u seconds
需要是函数的本地值，而不是在函数外部声明-您希望在函数内独立控制每个间隔。按照你的方式，你失去了对早期人的参考。当
秒==5时，无论
计数器是否<3
都要清除间隔，因为您正在启动一个新的计数器

大概是这样的：



var计数器=0；
函数intervalFunc（）{
var秒=0
var start_secs=setInterval（函数（）{
console.log（秒）
如果（秒===5）{
如果（计数器<3）{
intervalFunc（）；
}
//5次后，清除间隔
//如果计数器<3，则启动新的计数器
清除间隔（开始秒）；
返回
}
秒++；
}, 500);
计数器++；
}

intervalFunc（）
您只需要调用一次
setInterval
，因为它会