我有一些变量，如秒、毫秒、分钟、间隔等。我正在构造函数中初始化所有变量，并在 startinterval、stopinterval 函数中使用它们。
在窗口加载时，我已经调用了 init 函数并根据它们的 id 将事件附加到按钮，但是当我单击开始按钮时，this.timerId 上会引发未定义错误。
下面提供了 Html 和类型脚本代码。
需要知道我做错了什么。
HTML代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Index.js"></script>
</head>
<body>
<h1>Timer</h1>
<a id="minutes">1</a><a id="seconds">1</a><a id="miliseconds">1</a>
<button id="btnStart" value="Start" >Start</button>
<button id="btnPause" value="Pause" >Pause</button>
<button id="btnStop" value="Stop" >Clear</button>
</body>
</html>JS代码
class Timer {
seconds: number;
miliseconds: number;
minutes: number;
interval: number;
timerId: number;
constructor() {
this.seconds = 0;
this.miliseconds = 0;
this.minutes = 0;
this.interval = 25;
this.timerId = -1;
}
startTimer = function () {
if (this.timerId == -1) {
window.setInterval('this.timerActivate()', this.interval);
}
};
pauseTimer = function () {
window.clearInterval(this.timerId);
this.timerId = -1;
};
stopTimer = function () {
this.pauseTimer();
this.miliseconds = 0;
this.seconds = 0;
this.minutes = 0;
this.displayTimer();
};
displayTimer = function () {
document.getElementById('miliseconds').innerHTML = this.miliseconds.toString();
document.getElementById('seconds').innerHTML = this.seconds.toString();
document.getElementById('minutes').innerHTML = this.minutes.toString();
};
timerActivate = function () {
this.miliseconds += this.interval;
if (this.miliseconds >= 1000) {
this.miliseconds = 0;
this.seconds += 1;
}
if (this.seconds >= 60) {
this.miliseconds = 0;
this.seconds = 0;
this.minutes += 1;
}
this.displayTimer();
};
init = function (startButton: string, pauseButton: string, clearButton: string) {
document.getElementById(startButton).addEventListener('click', this.startTimer, false);
document.getElementById(pauseButton).addEventListener('click', this.pauseTimer, false);
document.getElementById(clearButton).addEventListener('click', this.stopTimer, false);
this.displayTimer();
}
}
window.onload = function () {
var timer = new Timer();
timer.init("btnStart", "btnPause", "btnStop");
}因为this当您使用function () {}语法或传递未绑定的函数引用时，您的上下文 ( ) 会发生变化。你可以做几件事。
更改函数定义以使用箭头函数：
startTimer = () => {
if (this.timerId == -1) {
window.setInterval('this.timerActivate()', this.interval);
}
};
或者将您的事件侦听器包装在箭头函数中：
document.getElementById(startButton).addEventListener('click', () => this.startTimer(), false);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句