const homeButton = document.getElementById('home');
window.myInterval = 0;
const showHome = () => {
console.log('showHome');
window.myInterval = setInterval(wait, 400)
}
const wait = () => {
console.log('wait');
if (homeButton.style.visibility === 'visible') {
console.log('clearingInterval');
window.myInterval = clearInterval(myInterval)
}
window.myInterval = clearInterval(myInterval)
homeButton.style.visibility = 'visible';
}
const waitUntil = () => {
console.log('waitUntil');
homeButton.style.visibility = 'hidden';
window.myInterval = clearInterval(myInterval)
}</pre>
<pre class="snippet-code-css lang-css"><code>div {
position: relative;
width: 2%;
height: 80vh;
z-index: 1;
transition: 0.5s;
text-align: center;
background-color: rgb(255, 250, 250);
color: rgb(245, 241, 241);
border: solid 2px rgb(243, 243, 243);
}
#home {
visibility: hidden;
}
div:hover {
width: 25%;
text-align: center;
}
body {
background-color: rgb(255, 252, 252);
}
#right {
position: absolute;
left: 5%;
width: 92%;
bottom: 4%;
height: 95%;
border: none;
background-color: rgb(255, 252, 252);
color: rgb(255, 252, 252);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div onmouseover="showHome()">
<button id="home" onclick="">Home</button>
</div>
<button id="right" onmouseover="waitUntil()">test</button>
<script src="script.js"></script>
</body>
</html>If you continuously hover over the home button division, it will start glitching and keep the home button visible. The console shows repeated 'wait' messages which means the interval is running endlessly without clearing. I attempted to clear it in the code:
if (homeButton.style.visibility === 'visible') {
console.log('clearingInterval');
window.myInterval = clearInterval(myInterval)
}
window.myInterval = clearInterval(myInterval)
I am trying to clear the interval here.
To view the full page, visit
By pressing F12 on that page and hovering over the sidebar, you will notice the repetition of 'wait' followed by 'clearingInterval' in the console.
The 'waitUntil' function makes the element invisible temporarily but due to the interval, it reverts back to being visible.