我正在编写一个脚本,并且有两个布尔语句非常相似但给出了不同的结果,我不明白为什么它们会相互冲突。
我的功能如下:
SCRIPT:
(function() {
window.onload = function() {
let stopped = true;
let button = document.getElementById("start-stop");
if (stopped) {
setInterval(function() {
console.log("The timer is working.");
}, 1000);
}
button.addEventListener('click', function(){
if (stopped) {
stopped = false;
console.log(stopped);
} else {
stopped = true;
console.log(stopped);
}
});
}
}
}).call(this);
基本思路是,当我按下按钮时setInterval
功能停止,但即使if/else
功能切换到false
,它也会继续运行。
例如,我的console.log看起来像这样:
即。 stopped = false
,但setInterval不会终止。
为什么这不能正确评估?
答案 0 :(得分:2)
您的代码存在的问题是您正在尝试处理已经开始运行的代码。简单来说,无论stop变量的值是什么,都会每1000ms调用一次setInterval方法。如果您希望真正停止日志,您可以执行以下任何操作:
clearInterval()
完全删除间隔或
setInterval(function() {
if (stopped) {
console.log("The timer is working.");
}
}, 1000);
检查已停止变量的值是否已更改(单击后)并相应地执行操作。为您的目的选择其中任何一个..
答案 1 :(得分:2)
即使在单击按钮之前,您正在调用setinterval。由于事件已被触发,您无法仅通过将变量设置为false来停止,您需要使用clearinterval清除间隔
检查以下代码段
var intervalId;
window.onload = function() {
let stopped = true;
let button = document.getElementById("start-stop");
var Interval_id;
button.addEventListener('click', function() {
if (stopped) {
Interval_id = callTimeout();
stopped = false;
} else {
clearInterval(Interval_id);
stopped = true;
}
});
}
function callTimeout() {
intervalId = setInterval(function() {
console.log("The timer is working.");
}, 1000);
return intervalId;
}
<input type="button" id="start-stop" value="click it">
希望有所帮助
答案 2 :(得分:0)
将if(stopped)
语句放在setInterval
函数中,因为如果你使用了这个函数,它会继续运行..
停止setInterval
功能的另一种方法是使用clearInterval
,就像这样
var intervalId = setInterval(function() { /* code here */}, 1000)
// And whenever you want to stop it
clearInterval(intervalId);
答案 3 :(得分:0)
单击按钮时,已停止的变量变为false,但setInterval将不会因为setInterval代码已执行而停止..按钮单击时不会再次执行。如果你重新加载页面,那么当你在第一行写入并且setInterval将再次执行时,已停止的变量将再次设置为true。
现在你可以做的是将setInterval存储在像这样的变量
中var timer = setInterval(function,1000);
然后当您单击按钮时使用此方法清除间隔
clearInterval(timer);
这应该可以解决问题..希望它有所帮助..