为什么 myInterval 没有被清除？
[英]Why isn't myInterval being cleared?
问题描述
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 上，它会出现故障并且只是保持主页按钮可见，这是因为在控制台中你可以看到“等待”被发送垃圾邮件，这意味着间隔将永远持续下去我不知道为什么，我试图让它清除，但它没有？
if (homeButton.style.visibility === 'visible') {
console.log('clearingInterval');
window.myInterval = clearInterval(myInterval)
}
window.myInterval = clearInterval(myInterval)
是我试图清除间隔的地方。
想看完整版？ https://fluid-ui.danialstudent.repl.co/
在该页面上按 F12，然后将鼠标悬停在侧边栏上，您可以看到“等待”和“clearingInterval”重复很多次。
我注意到 waitUntil 函数使它不可见，但由于间隔，它又回来了
2 个解决方案
解决方案1
1 已采纳 2020-11-16 19:13:48
正如其他答案所示，您可以简单地调用clearInterval(myInterval)而无需赋值。 然而，如果你的设计目标是显示，只有当它的父DIV是在徘徊home键，那么你可以使用一个功能，它隐藏在home键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
解决方案2
0 2020-11-16 19:08:46
你不需要重新定义window.myInterval只需使用clearInterval(myInterval)它应该结束循环
编辑：如果这不起作用，请尝试clearInterval(window.myInterval)以防间隔未全局声明
为什么这个itemDataSource没有被清除？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.