const panels = [
new Panel(),
new Panel(),
new Panel(),
];
今回、上記の記述によりインスタンスが3つ作成され、それらを配列の中に格納していると思うのですが、new Panel()
を実行した時点で、Panel
クラスのconstructor
の中でthis.timeoutId = undefined;
が異なるインスタンス内で1つずつ定義されました。
これは、インスタンス生成時に3つの異なるtimeoutId
が定義され(初期値は全てundefined
)、spin
メソッドのsetTimeout()
によって、全てのtimeoutId
が更新されていくという認識で合っていますでしょうか?
また更新する際は、異なるtimeoutId
として更新されていくのでしょうか?
というのは、異なるtimeoutId
でなければ、仮にいずれかのストップボタン押下時に、どのタイマのIDを解除したいか選べないと思ったからです。
constructor() {
const section = document.createElement('section');
section.classList.add('panel');
this.img = document.createElement('img');
this.img.src = this.getRandomImage();
// 初期化(ここがわからない)
this.timeoutId = undefined;
this.stop = document.createElement('div');
this.stop.textContent = 'STOP';
this.stop.classList.add('stop');
this.stop.addEventListener('click', () => {
clearTimeout(this.timeoutId);
})
section.appendChild(this.img);
section.appendChild(this.stop);
const main = document.querySelector('main');
main.appendChild(section);
}
お手数ですが、ご指導のほどよろしくお願いいたします!
この回答を見るにはプレミアムプランへの登録が必要です
プレミアムプランとは?