今天小編給大家分享的是如何借助CSS 更好的控制定時(shí)器，相信很多人都不太了解，為了讓大家更加了解，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、集賢網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為集賢等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

平時(shí)工作中很多場(chǎng)合都要用到定時(shí)器，比如延遲加載、定時(shí)查詢等等，但定時(shí)器的控制有時(shí)候會(huì)有些許麻煩，比如鼠標(biāo)移入停止、移出再重新開(kāi)始。這次介紹幾個(gè)借助 CSS 來(lái)更好的控制定時(shí)器的方法，一起了解一下吧，相信可以帶來(lái)不一樣的體驗(yàn)。

一、hover 延時(shí)觸發(fā)

有這樣一個(gè)場(chǎng)景，在鼠標(biāo)停留在一個(gè)元素上1s后才觸發(fā)事件，不滿1s就不會(huì)觸發(fā)，這樣的好處是，可以避免鼠標(biāo)在快速劃過(guò)時(shí)，頻繁的觸發(fā)事件。如果是用js來(lái)實(shí)現(xiàn)，可能會(huì)這樣

var timer = null
el.addEventListener('mouseover', () => {
  timer && clearTimeout(timer)
  timer = setTimeout(() => {
    // 具體邏輯
  }, 1000)
})

是不是這樣？等等，這樣還沒(méi)完，這樣只做到了延時(shí)，鼠標(biāo)離開(kāi)以后還是會(huì)觸發(fā)，還需要在鼠標(biāo)離開(kāi)時(shí)取消定時(shí)器

el.addEventListener('mouseout', () => {
  timer && clearTimeout(timer)
})

另外，在使用mouseout時(shí)還需要考慮 dom 嵌套結(jié)構(gòu)，因?yàn)檫@些事件在父級(jí) -> 子級(jí)的過(guò)程中仍然會(huì)觸發(fā)，總之，細(xì)節(jié)會(huì)非常多，很容易誤觸發(fā)。

現(xiàn)在轉(zhuǎn)折來(lái)了，如果借用 CSS 就可以有效地避免上述問(wèn)題，如下，先給需要觸發(fā)的元素加一個(gè)有延時(shí)的transition

button:hover{
  opacity: 0.999; /*無(wú)關(guān)緊要的樣式*/
  transition: 0s 1s opacity; /*延時(shí) 1s */
}

這里只需一個(gè)無(wú)關(guān)緊要的樣式就行，如果opacity已經(jīng)使用過(guò)了，可以使用其他的，比如transform:translateZ(.1px)，也是可行的。然后添加監(jiān)聽(tīng)transitionend方法

GlobalEventHandlers.ontransitionend - Web API 接口參考 | MDN (mozilla.org)

el.addEventListener('transitionend', () => {
  // 具體邏輯
})

這就結(jié)束了。無(wú)需定時(shí)器，也無(wú)需取消，更無(wú)需考慮 dom 結(jié)構(gòu)，完美實(shí)現(xiàn)。

下面是一個(gè)小實(shí)例，在hover一段時(shí)間后觸發(fā)alert

原理和上面一致，完整代碼可以查看線上demo：hover_alert (codepen.io)或者h(yuǎn)over_alert(runjs.work)

?以后再碰到這樣的需要可以停下來(lái)思考一番，很多和mouseover有關(guān)的交互都可以用這種方式來(lái)實(shí)現(xiàn)

二、長(zhǎng)按觸發(fā)事件

長(zhǎng)按也是一個(gè)比較常見(jiàn)的需求，它可以很好的和點(diǎn)擊事件區(qū)分開(kāi)來(lái)，從而賦予更多的交互能力。

但是原生js中卻沒(méi)有這樣一個(gè)事件，如果要實(shí)現(xiàn)長(zhǎng)按事件，通常需要借助定時(shí)器和鼠標(biāo)按下事件，如下

el.onmousedown = function(){
    this.timer && clearTimeout(this.timer);
    this.timer = settimeout(function(){
        //業(yè)務(wù)代碼
    },1000)
}
el.onmouseup = function(){
    this.timer && clearTimeout(this.timer);
}

又是定時(shí)器和取消定時(shí)器的場(chǎng)景，和前面一個(gè)例子有些類似，也可以借助 CSS 來(lái)實(shí)現(xiàn)，由于是鼠標(biāo)按下，可以聯(lián)想到:active，因此可以這樣來(lái)實(shí)現(xiàn)

button:hover:active{
  opacity: .999; /*無(wú)關(guān)緊要的樣式*/
  transition: opacity 1s; /*延時(shí) 1s */
}

然后再監(jiān)聽(tīng)transitionend方法

el.addEventListener('transitionend', () => {
  // 具體邏輯
})

是不是非常方便呢？下面是以前做過(guò)的一個(gè)小案例，實(shí)現(xiàn)了長(zhǎng)按觸發(fā)元素選中

完整代碼可以查看線上demo：長(zhǎng)按框選 (codepen.io)或者長(zhǎng)按框選 (runjs.work)

三、輪播和暫停

再來(lái)看一個(gè)比較有意思的例子，輪播圖。

通常輪播圖都會(huì)自動(dòng)播放，然后鼠標(biāo)hover時(shí)會(huì)暫停輪播圖，通常的做法是這樣的

function autoPlay(){
  timer && clearInterval(timer)
  timer = setInterval(function(){
    // 輪播邏輯
  }, 1000)
}
autoPlay()
view.onmouseover = function(){
    timer && clearInterval(timer)
}
el.onmouseout = function(){
    autoPlay()
}

又是定時(shí)器的取消和設(shè)置，要綁定一堆事件，太煩人了，可以換種方式嗎？當(dāng)然可以了，借助 CSS 動(dòng)畫，一切都好辦了。

和前面不太相同的是，這里是setInterval，可以重復(fù)觸發(fā)，那 CSS 中有什么可以重復(fù)觸發(fā)的呢？沒(méi)錯(cuò)，就是 CSS 動(dòng)畫！當(dāng) CSS 動(dòng)畫設(shè)置次數(shù)為infinite就可以無(wú)限循環(huán)了，和這個(gè)定時(shí)器效果非常類似，而且可以直接通過(guò):hover暫停和播放動(dòng)畫。監(jiān)聽(tīng)每次動(dòng)畫的觸發(fā)可以用animationiteration這個(gè)方法，表示每個(gè)動(dòng)畫輪回就觸發(fā)一次

GlobalEventHandlers.onanimationiteration - Web API 接口參考 | MDN (mozilla.org)

所以用這種思路實(shí)現(xiàn)就是

.view {
  animation: scroll 1s infinite; /*每1s動(dòng)畫，無(wú)限循環(huán)*/
}
.view:hover{
  animation-play-state: paused; /*hover暫停*/
}
@keyframes scroll {
  to {
    transform: translateZ(.1px); /*無(wú)關(guān)緊要的樣式*/
  }
}

然后再監(jiān)聽(tīng)animationiteration事件

view.addEventListener("animationiteration", () => {
  // 輪播邏輯
})

是不是省去了大半的js代碼？而且也更好理解，控制也更為方便。

下面是一個(gè)通過(guò)animationiteration來(lái)代替setInterval實(shí)現(xiàn)的輪播圖

完整代碼可以查看線上demo：CSS banner(codepen.io)或者css_banner(runjs.work)

四、總結(jié)一下

以上就是你可能不需要定時(shí)器的幾個(gè)替代方案，相比定時(shí)器而言，CSS 在控制定時(shí)器的開(kāi)啟和暫停上更有優(yōu)勢(shì)，下面總結(jié)一下

• :hover配合transition延時(shí)、transitionend監(jiān)聽(tīng)可以實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)延時(shí)觸發(fā)效果

• :active配合transition延時(shí)、transitionend監(jiān)聽(tīng)可以實(shí)現(xiàn)長(zhǎng)按觸發(fā)效果

• CSS 動(dòng)畫設(shè)置infinite后配合animationiteration監(jiān)聽(tīng)可以實(shí)現(xiàn)周期性觸發(fā)效果

• 可以直接通過(guò):hover來(lái)控制臺(tái)動(dòng)畫的暫停和播放

當(dāng)然，可以利用的不僅僅是以上幾個(gè)案例，任何和 CSS 交互（:hover、:active）有類似功能的都可以朝這個(gè)方向去思考，是不是可以實(shí)現(xiàn)地更加優(yōu)雅？

關(guān)于如何借助CSS 更好的控制定時(shí)器就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。