平常工作中很多場合都要用到計時器，例如延遲載入、定時查詢等等，但計時器的控制有時會有些許麻煩，例如滑鼠移入停止、移出再重新開始。這次介紹幾個借助 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有關的交互都可以用這種方式來實現
二、長按觸發事件
#按也是一個比較常見的需求，它可以很好的和點擊事件區分開來，從而賦予更多的互動能力。
但是原生
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)或長按框選(runjs.work)
三、輪播和暫停
#再來看一個比較有意思的例子，輪播圖。
通常輪播圖都會自動播放，然後滑鼠
hover時會暫停輪播圖，通常的做法是這樣的
function autoPlay(){
timer && clearInterval(timer)
timer = setInterval(function(){
// 轮播逻辑
}, 1000)
}
autoPlay()
view.onmouseover = function(){
timer && clearInterval(timer)
}
el.onmouseout = function(){
autoPlay()
}登入後複製
又是計時器的取消和設置，要綁定一堆事件，太煩人了，可以換種方式嗎？當然可以了，借助 CSS 動畫，一切都好辦了。
和前面不太相同的是，這裡是
setInterval，可以重複觸發，那 CSS 中有什麼可以重複觸發的呢？沒錯，就是 CSS 動畫！當 CSS 動畫設定次數為infinite就可以無限循環了，和這個計時器效果非常類似，而且可以直接透過:hover暫停和播放動畫。監聽每次動畫的觸發可以用animationiteration這個方法，表示每個動畫輪迴就觸發一次
GlobalEventHandlers.onanimationiteration - Web API 接口参考 | MDN (mozilla.org)
所以用这种思路实现就是
.view {
animation: scroll 1s infinite; /*每1s动画，无限循环*/
}
.view:hover{
animation-play-state: paused; /*hover暂停*/
}
@keyframes scroll {
to {
transform: translateZ(.1px); /*无关紧要的样式*/
}
}登入後複製
然后再监听animationiteration事件
view.addEventListener("animationiteration", () => {
// 轮播逻辑
})登入後複製
是不是省去了大半的js代码？而且也更好理解，控制也更为方便。
下面是一个通过animationiteration来代替setInterval实现的轮播图
完整代码可以查看线上demo：CSS banner(codepen.io)或者css_banner(runjs.work)
四、总结一下
以上就是你可能不需要定时器的几个替代方案，相比定时器而言，CSS 在控制定时器的开启和暂停上更有优势，下面总结一下
:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
:active配合transition延时、transitionend监听可以实现长按触发效果
CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
可以直接通过:hover来控制台动画的暂停和播放
当然，可以利用的不仅仅是以上几个案例，任何和 CSS 交互（:hover、:active）有类似功能的都可以朝这个方向去思考，是不是可以实现地更加优雅？
（学习视频分享：web前端）
以上是總結分享幾個借助 CSS 來更好的控制定時器的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
