Javascript 计数器在setInterval循环中不断重置为声明的变量
我试图用setInterval显示每秒上升的计时器 不过,变量似乎在每个循环中都会自行重置;结果是HTML页面上的显示不会改变 我已经将变量移到函数之外,但这不起作用。我真的不知道从这里到哪里去Javascript 计数器在setInterval循环中不断重置为声明的变量,javascript,typescript,timer,setinterval,seconds,Javascript,Typescript,Timer,Setinterval,Seconds,我试图用setInterval显示每秒上升的计时器 不过,变量似乎在每个循环中都会自行重置;结果是HTML页面上的显示不会改变 我已经将变量移到函数之外,但这不起作用。我真的不知道从这里到哪里去 this.intervalFour = setInterval(() => this.totalTime(this.secs, this.restSecs), 1000); totalTime(seconds, rests) { var fullTime = s
this.intervalFour = setInterval(() => this.totalTime(this.secs, this.restSecs), 1000);
totalTime(seconds, rests) {
var fullTime = seconds * 8 + rests * 7;
fullTime--;
var secCounter: any = 0;
var minCounter: any = 0;
secCounter++;
if (secCounter < 10) {
secCounter = "0" + secCounter;
}
if (minCounter < 10) {
minCounter = "0" + minCounter;
}
if (secCounter == 60) {
secCounter = 0;
minCounter++;
}
if (fullTime = 0) {
clearInterval(this.intervalFour);
}
this.m.innerHTML = minCounter;
this.s.innerHTML = secCounter;
console.log(secCounter, minCounter, "test");
}
我知道这是一件愚蠢的事情,但我找不到解决方案,让secCounter在每个循环中上升一个。我不确定这是否正确,因为这里没有完整的代码,但我认为setInterval回调函数中的'this'关键字是个问题 setInterval回调中的“this”绑定到全局“this”,在本例中为窗口对象 因此,您需要像这样指定“this”对象
const self = this;
self.secs = initSecs;
self.restSecs = initRestSecs;
self.totalTime = function totalTime() { ... };
setInterval(() => self.totalTime(self.secs, self.restSecs), 1000);
您可以尝试以下方法 虽然我没有特定的值,因此我对该代码进行了注释,但您可以根据需要取消注释该代码:
<script type="text/javascript">
var secs = 10;
var restSecs = 10;
var secCounter = 0;
var minCounter = 0;
this.intervalFour = setInterval(() => this.totalTime(this.secs, this.restSecs), 1000);
function totalTime(seconds, rests) {
var fullTime = seconds * 8 + rests * 7;
fullTime--;
this.secCounter++;
if (this.secCounter < 10) {
this.secCounter = "0" + this.secCounter;
}
if (this.minCounter < 10) {
this.minCounter = "0" + this.minCounter;
}
if (this.secCounter == 60) {
this.secCounter = 0;
this.minCounter++;
}
// if (fullTime = 0) {
// clearInterval(this.intervalFour);
// }
console.log("this.minCounter" , this.minCounter);
console.log("this.secCounter" , this.secCounter);
// this.m.innerHTML = this.minCounter;
// this.s.innerHTML = this.secCounter;
console.log(this.secCounter, this.minCounter, "test");
}
在这个解决方案中,秒数每秒钟都会完全增加 如果您希望显示某种计时器,这可能会有所帮助
const displayTime = (ticks) => {
const seconds = parseInt(ticks % 60);
let minute = parseInt(ticks / 60);
const hour = parseInt(minute / 60);
if (hour > 0) {
minute = parseInt(minute % 60);
}
console.log([hour, minute, seconds].join(':'));
};
const tick = 0;
setInterval(()=> displayTime(tick++), 1000);
setInterval在代码顶部的另一个函数中调用。我没有把完整的代码放在这里,因为这里有很多代码,而且大部分代码都不相关。我不相信“this.”是问题所在,因为我在同一页上以相同的方式设置了其他setInterval,没有问题。我很确定问题出在函数中以及如何使用/放置变量的位置。太好了。非常感谢你!