还在用定时器吗？借助 CSS 来监听事件

本文链接：https://blog.csdn.net/qq_41221596/article/details/128437830

本文介绍了如何利用CSS替代定时器来实现hover延时触发、长按事件以及轮播图的暂停播放功能。通过CSS的transition和animation，结合JavaScript的事件监听，可以简化代码，更好地控制交互行为，减少误触发的问题。

摘要由CSDN通过智能技术生成

平时工作中很多场合都要用到定时器，比如延迟加载、定时查询等等，但定时器的控制有时候会有些许麻烦，比如鼠标移入停止、移出再重新开始。这次介绍几个借助 CSS 来更好的控制定时器的方法，一起了解一下吧，相信可以带来不一样的体验

有这样一个场景，在鼠标停留在一个元素上1s后才触发事件，不满1s就不会触发，这样的好处是，可以避免鼠标在快速划过时，频繁的触发事件。如果是用js来实现，可能会这样

var timer = null
el.addEventListener('mouseover', () => {
  timer && clearTimeout(timer)
  timer = setTimeout(() => {
    // 具体逻辑
  }, 1000)
})
复制代码

是不是这样？等等，这样还没完，这样只做到了延时，鼠标离开以后还是会触发，还需要在鼠标离开时取消定时器

el.addEventListener('mouseout', () => {
  timer && clearTimeout(timer)
})
复制代码

另外，在使用mouseout时还需要考虑 dom 嵌套结构，因为这些事件在父级 -> 子级的过程中仍然会触发，总之，细节会非常多，很容易误触发。

现在转折来了，如果借用 CSS 就可以有效地避免上述问题，如下，先给需要触发的元素加一个有延时的transition

button:hover{
  opacity: 0.999; /*无关紧要的样式*/
  transition: 0s 1s opacity; /*延时 1s */
}
复制代码

这里只需一个无关紧要的样式就行，如果opacity已经使用过了，可以使用其他的，比如transform:t