fix: track animation symbols render

This commit is contained in:
Kentai Radiquum 2024-09-15 00:25:47 +05:00
parent 53c4d26eaa
commit c610529e90
Signed by: Radiquum
GPG key ID: 858E8EE696525EED

View file

@ -3,14 +3,18 @@ function sleep(time) {
} }
const SYMBOL_DELAY = 150; const SYMBOL_DELAY = 150;
let DELETE_INTERVAL = null;
let UPDATE_INTERVAL = null;
function deletePreviousTrack(newTrackName) { function deletePreviousTrack(newTrackName) {
const trackName = document.getElementById("track-name"); const trackName = document.getElementById("track-name");
const prevTrackNameLen = trackName.innerHTML.length; const prevTrackNameLen = trackName.innerHTML.length;
trackName.style.setProperty("--cursor-animation", "none"); trackName.style.setProperty("--cursor-animation", "none");
clearInterval(DELETE_INTERVAL);
clearInterval(UPDATE_INTERVAL);
let removed = 0; let removed = 0;
const interval = setInterval(() => { DELETE_INTERVAL = setInterval(() => {
removed += 1; removed += 1;
trackName.innerHTML = trackName.innerHTML.substring( trackName.innerHTML = trackName.innerHTML.substring(
0, 0,
@ -18,7 +22,7 @@ function deletePreviousTrack(newTrackName) {
); );
if (removed == prevTrackNameLen - 1) { if (removed == prevTrackNameLen - 1) {
clearInterval(interval); clearInterval(DELETE_INTERVAL);
updateTrack(newTrackName); updateTrack(newTrackName);
return true; return true;
} }
@ -28,9 +32,11 @@ function deletePreviousTrack(newTrackName) {
function updateTrack(newTrackName) { function updateTrack(newTrackName) {
const trackName = document.getElementById("track-name"); const trackName = document.getElementById("track-name");
const TrackNameLen = newTrackName.length; const TrackNameLen = newTrackName.length;
clearInterval(DELETE_INTERVAL);
clearInterval(UPDATE_INTERVAL);
let added = 0; let added = 0;
const interval = setInterval(() => { UPDATE_INTERVAL = setInterval(() => {
if (added < TrackNameLen) { if (added < TrackNameLen) {
trackName.innerHTML += newTrackName[added]; trackName.innerHTML += newTrackName[added];
console.log(added, TrackNameLen, newTrackName[added]); console.log(added, TrackNameLen, newTrackName[added]);
@ -38,7 +44,7 @@ function updateTrack(newTrackName) {
} }
if (added == TrackNameLen) { if (added == TrackNameLen) {
clearInterval(interval); clearInterval(UPDATE_INTERVAL);
setTimeout(() => { setTimeout(() => {
trackName.innerHTML += '"'; trackName.innerHTML += '"';
}, SYMBOL_DELAY); }, SYMBOL_DELAY);