您的問題出在閃爍功能中。即使在調(diào)整大小功能后，這些設置超時仍然會觸發(fā)。所以他們稱之為.draw（），即使這些星星已經(jīng)從你的數(shù)組中移除了。該函數(shù)仍然記得“這”是什么。
您可以像這樣清除所有超時：
window.addEventListener("resize", () => {
let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");
canvas.width = window.innerWitdh;
canvas.height = window.innerHeight;
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
starCollection = [];
randomStars = [];
var id = window.setTimeout(function () { }, 0);
while (id--) {
window.clearTimeout(id); // will do nothing if no timeout with id is present
}
let event = new CustomEvent("showStars");
dispatchEvent(event);
});
下面是一個有 10 顆星星的示例，其中 5 顆閃爍。我把星星做得更大，這樣更容易看到。
<html>
<head>
<style>
body {
background: black;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
let starCollection = [];
let randomStars = [];
let numberofStars = 10;
let flickeringStars = 5;
class Star {
constructor(x, y, color, radius) {
this._canvas = document.querySelector('canvas');
this._canvas.width = window.innerWidth;
this._canvas.height = window.innerHeight;
this._c = this._canvas.getContext('2d');
this._radius = radius;
this._x = x;
this._y = y;
this._color = color;
}
//drawing individual stars
draw() {
//Drawing
this._c.beginPath();
this._c.arc(this._x, this._y, this._radius, 0, Math.PI * 2, false);
this._c.fillStyle = this._color;
this._c.strokeStyle = 'black';
this._c.stroke();
this._c.fill();
this._c.closePath();
}
//Fade in and out for stars
flicker() {
setTimeout(() => {
this._color = '#EBEBEB';
}, 300);
setTimeout(() => {
this._color = '#D9D9D9';
}, 600);
setTimeout(() => {
this._color = '#B6B6B6';
}, 900);
setTimeout(() => {
this._color = '#898787';
}, 1200);
setTimeout(() => {
this._color = '#4F4F4F';
}, 1500);
setTimeout(() => {
this._color = 'black';
}, 1800);
setTimeout(() => {
this._color = '#4F4F4F';
}, 2100);
setTimeout(() => {
this._color = '#898787';
}, 2400);
setTimeout(() => {
this._color = '#B6B6B6';
}, 2700);
setTimeout(() => {
this._color = '#D9D9D9';
}, 3000);
setTimeout(() => {
this._color = '#EBEBEB';
}, 3300);
setTimeout(() => {
this._color = '#FFFFFF';
}, 3600);
setTimeout(() => {
this.draw();
}, 300);
setTimeout(() => {
this.draw();
}, 600);
setTimeout(() => {
this.draw();
}, 900);
setTimeout(() => {
this.draw();
}, 1200);
setTimeout(() => {
this.draw();
}, 1500);
setTimeout(() => {
this.draw();
}, 1800);
setTimeout(() => {
this.draw();
}, 2100);
setTimeout(() => {
this.draw();
}, 2400);
setTimeout(() => {
this.draw();
}, 2700);
setTimeout(() => {
this.draw();
}, 3000);
setTimeout(() => {
this.draw();
}, 3300);
setTimeout(() => {
this.draw();
}, 3600);
}
}
window.addEventListener("showStars", () => {
//Stars animation
//Adding the stars to the array as objects
for (let i = 0; i < numberofStars; i++) {
let x = Math.floor(Math.random() * window.innerWidth);
let y = Math.floor(Math.random() * window.innerHeight);
// let starSize = (Math.random() + 1) - 0.7;
let starSize = 10;
starCollection.push(new Star(x, y, "white", starSize));
}
//Drawing all the stars on the screen
for (let i = 0; i < starCollection.length; i++) {
starCollection[i].draw();
}
//Storing random stars
const shuffleStars = () => {
randomStars = [];
for (let i = 0; i < flickeringStars; i++) {
randomStars.push(Math.floor(Math.random() * starCollection.length))
}
}
shuffleStars();
//Flickering stars randomly
const starflicker = () => {
console.log(starCollection);
console.log(randomStars);
setTimeout(() => {
requestAnimationFrame(starflicker);
for (let i = 0; i < randomStars.length; i++) {
starCollection[randomStars[i]].flicker();
}
shuffleStars();
}, 500);
}
starflicker();
})
window.addEventListener("resize", () => {
let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");
canvas.width = window.innerWitdh;
canvas.height = window.innerHeight;
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
starCollection = [];
randomStars = [];
var id = window.setTimeout(function () { }, 0);
while (id--) {
window.clearTimeout(id); // will do nothing if no timeout with id is present
}
let event = new CustomEvent("showStars");
dispatchEvent(event);
});
dispatchEvent(new CustomEvent("showStars"))
</script>
</body>
</html>
查看這篇文章，了解有關超時清除代碼如何工作的更多信息： javascript：清除所有超時？
