从事件调用时，clearTimeout() 不起作用
[英]clearTimeout() doesn't work when called from an event
问题描述
This is a summarized example of another larger project I have.
这是我的另一个更大项目的总结示例。 In this example I set a new style for my node when I click on it, once the new style is set I fire a setTimeout() to allow the style for a few seconds until it desappear.在这个例子中，当我点击它时，我为我的节点设置了一个新样式，一旦设置了新样式，我就会触发 setTimeout() 以允许样式持续几秒钟，直到它消失。 on the other hand, I have a keydown event that is supposed to cancel the Timeout when I press any key.另一方面，我有一个 keydown 事件，当我按下任意键时，它应该取消超时。 So if the timeout is canceled with clearTimeout(), the box is supposed to stay styled, but it is not working.因此，如果使用 clearTimeout() 取消超时，框应该保持样式，但它不起作用。 The clearTimeout() doesn't cancel the timeout, and doesn't prevent the style to be deleted. clearTimeout() 不会取消超时，也不会阻止样式被删除。
Any idea about what is wrong with the 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
I've noticed that the event ontransitionend fires once for each style in the class i've set, so i'm creating more than one Timeout.我注意到事件 ontransitionend 为我设置的 class 中的每种样式触发一次，因此我创建了多个超时。
解决方案2
0 2023-01-28 05:37:44
The ontransitionend event gets called for each transitioned style, in your case, that's your background-color , as well as border-top-color , border-right-color , border-bottom-color and border-left-color for the border style change due to the all in your transitional: all... style.为每个过渡样式调用ontransitionend事件，在您的情况下，这是您的background-color ，以及border样式的border-top-color ， border-right-color ， border-bottom-color和border-left-color由于all in your transitional: all...风格而改变。 You could apply a check in your event handler to only apply your timeout when the transition is for CSS style background-color by using event.propertyName .您可以通过使用event.propertyName在事件处理程序中应用检查以仅在转换针对 CSS 样式background-color时应用超时。 This way you won't end up creating multiple timeouts and will be able to cancel it.:这样你就不会最终创建多个超时并且能够取消它。：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.