前端（vue）入門到精通課程：進入學(xué)習(xí)

平時工作中很多場合都要用到定時器，比如延遲加載、定時查詢等等，但定時器的控制有時候會有些許麻煩，比如鼠標(biāo)移入停止、移出再重新開始。這次介紹幾個借助 CSS 來更好的控制定時器的方法，一起了解一下吧，相信可以帶來不一樣的體驗。【推薦學(xué)習(xí)：css視頻教程】

一、hover 延時觸發(fā)

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

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

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

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

另外，在使用mouseout時還需要考慮 dom 嵌套結(jié)構(gòu)，因為這些事件在父級 -> 子級的過程中仍然會觸發(fā)，總之，細節(jié)會非常多，很容易誤觸發(fā)。

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

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

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

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

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

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

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

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

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

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

長按也是一個比較常見的需求，它可以很好的和點擊事件區(qū)分開來，從而賦予