平时工作中很多场合都要用到定时器，比如延迟加载、定时查询等等，但定时器的控制有时候会有些许麻烦，比如鼠标移入停止、移出再重新开始。这次介绍几个借助 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)[1]。

el.addEventListener(‘transitionend’, () => {
// 具体逻辑
})
这就结束了。无需定时器，也无需取消，更无需考虑 dom 结构，完美实现。

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

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

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

二、长按触发事件
长按也是一个比较常见的需求，它可以很好的和点击事件区分开来，从而赋予更多的交互能力。

但是原生js中却没有这样一个事件，如果要实现长按事件，通常需要借助定时器和鼠标按下事件，如下：

el.onmousedown = function(){
this.timer && clearTimeout(this.timer);
this.timer = settimeout(function(){
//业务代码
},1000)
}
el.onmouseup = function(){
this.timer && clearTimeout(this.timer);
}
又是定时器和取消定时器的场景，和前面一个例子有些类似，也可以借助 CSS 来实现，由于是鼠标按下，可以联想到:active，因此可以这样来实现。

button:hover:active{
opacity: .999; /无关紧要的样式/
transition: opacity 1s; /*延时 1s */
}
然后再监听transitionend方法；

el.addEventListener(‘transitionend’, () => {
// 具体逻辑
})
是不是非常方便呢？下面是以前做过的一个小案例，实现了长按触发元素选中。

完整代码可以查看线上demo：长按框选 (codepen.io)[4]或者长按框选 (runjs.work)[5]。

三、轮播和暂停
再来看一个比较有意思的例子，轮播图。

通常轮播图都会自动播放，然后鼠标hover时会暂停轮播图，通常的做法是这样的。