前端（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有關的交互都可以用這種方式來實現

二、長按觸發事件

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