为什么 myInterval 没有被清除？

Question

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)
}

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>

所以基本上，如果您一直将鼠标悬停在主页按钮 div 上，它会出现故障并仅保持主页按钮可见，这是因为在控制台中您可以看到 'wait' 被垃圾邮件所以这意味着间隔将永远持续下去，我不确定为什么，我试图让它清除但它没有？

  if (homeButton.style.visibility === 'visible') {
    console.log('clearingInterval');
    window.myInterval = clearInterval(myInterval)
  }
  window.myInterval = clearInterval(myInterval)

是我试图清除间隔的地方。

想看全页吗？ https://fluid-ui.danialstudent.repl.co/

在该页面上按 F12，然后将鼠标悬停在侧边栏上，您可以看到 'wait' 和 'clearingInterval' 之后重复很多。

我注意到 waitUntil 函数使它不可见，但由于间隔

Answer 1

你不需要重新定义window.myInterval 只需使用 clearInterval(myInterval) 它应该结束循环

编辑：如果这不起作用，请尝试 clearInterval(window.myInterval) 以防间隔未全局声明

Answer 2

如其他答案所示，您可以直接调用 clearInterval(myInterval) 而无需分配。但是，如果您的设计目标是仅在其父级 div 悬停时显示主页按钮，那么您可以使用隐藏主页按钮的功能 mouseleave 而不是设置间隔。

const homeButton = document.getElementById('home');

const showHome = () => {
  console.log('showHome');
  homeButton.style.visibility = "visible";
}

function unshowHome() {
  console.log('clear!');
  homeButton.style.visibility = "hidden";
}

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 onmouseenter="showHome()" onmouseleave="unshowHome()">
    <button id="home" onclick="">Home</button>
    </div>
    <button id="right" onmouseover="">test</button>
    <script src="script.js"></script>
  </body>
</html>

回答你原来的问题，间隔没有被清除，因为同一个变量window.myInterval被用于多个间隔。当侧边栏在 400 毫秒内悬停两次时，在第一个间隔可以被清除之前，一个新的间隔被分配给变量。这会导致后续 clearInterval() 仅清除第二个间隔，而对第一个间隔的引用丢失。您可以看到以下代码如何两次清除间隔，但第一个间隔继续运行.

window.myInterval = setInterval(function() {
  console.log("interval 1");
}, 1000);

window.myInterval = setInterval(function() {
  console.log("interval 2");
}, 1000);

clearInterval(window.myInterval);
clearInterval(window.myInterval);  // undefined

为什么 myInterval 没有被清除？

Why isn't myInterval being cleared?

html

javascript

css

setinterval