从事件调用时，clearTimeout() 不起作用
[英]clearTimeout() doesn't work when called from an event
问题描述
这是我的另一个更大项目的总结示例。 在这个例子中，当我点击它时，我为我的节点设置了一个新样式，一旦设置了新样式，我就会触发 setTimeout() 以允许样式持续几秒钟，直到它消失。 另一方面，我有一个 keydown 事件，当我按下任意键时，它应该取消超时。 因此，如果使用 clearTimeout() 取消超时，框应该保持样式，但它不起作用。 clearTimeout() 不会取消超时，也不会阻止样式被删除。
知道 clearTimeout() 有什么问题吗？
const box = document.querySelector("div") let timeout box.onclick = () =>{ box.classList.add("black") } box.ontransitionend = () =>{ timeout = setTimeout(() =>{ box.classList.remove("black") }, 3000) } window.onkeydown = () =>{ clearTimeout(timeout) }
*{ margin: 0px; padding: 0px; }.box{ width: 200px; height: 200px; margin: auto; border: #333 1px solid; transition: all 1s ease-in-out 0s; }.black{ background-color: black; border: #ccc 1px solid; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>test</title> <link rel="stylesheet" href="./styles.css"> </head> <body> <div class="box"> </div> <script src="./main.js"></script> </body> </html>
2 个解决方案
解决方案1
0 2023-01-28 05:37:12
我注意到事件 ontransitionend 为我设置的 class 中的每种样式触发一次，因此我创建了多个超时。
解决方案2
0 2023-01-28 05:37:44
为每个过渡样式调用ontransitionend事件，在您的情况下，这是您的background-color ，以及border样式的border-top-color ， border-right-color ， border-bottom-color和border-left-color由于all in your transitional: all...风格而改变。 您可以通过使用event.propertyName在事件处理程序中应用检查以仅在转换针对 CSS 样式background-color时应用超时。 这样你就不会最终创建多个超时并且能够取消它。：
const box = document.querySelector("div"); let timeout; box.onclick = () => { box.classList.add("black") } box.ontransitionend = (event) => { if (event.propertyName === "background-color") { timeout = setTimeout(() => { box.classList.remove("black") }, 3000); } } window.onkeydown = () => { clearTimeout(timeout); }
* { margin: 0px; padding: 0px; }.box { width: 200px; height: 200px; margin: auto; border: #333 1px solid; transition: all 1s ease-in-out 0s; }.black { background-color: black; border: #ccc 1px solid; }
<div class="box"></div>
由于ajax jquery函数，clearTimeout无法正常工作，引导模式事件未处理
[英]clearTimeout doesn't work due to ajax jquery function, bootstrap modal event not handled
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.