总结分享几个借助 CSS 来更好的控制定时器的方法

前端（vue）入门到精通课程：进入学习

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

一、hover 延时触发

有这样一个场景，在鼠标停留在一个元素上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:translateZ(.1px)，也是可行的。然后添加监听transitionend方法

GlobalEventHandlers.ontransitionend – Web API 接口参考 | MDN (mozilla.org)

el.addEventListener('transitionend', () => {   // 具体逻辑 })

这就结束了。无需定时器，也无需取消，更无需考虑 dom 结构，完美实现。

下面是一个小实例，在hover一段时间后触发alert

原理和上面一致，完整代码可以查看线上demo：hover_alert (codepen.io)或者hover_alert(runjs.work)

?以后再碰到这样的需要可以停下来思考一番，很多和mouseover有关的交互都可以用这种方式来实现

二、长按触发事件

长按也是一个比较常见的需求，它可以很好的和点击事件区分开来，从而赋予