站長資訊網
前端（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有關的交互都可以用這種方式來實現
二、長按觸發事件
長按也是一個比較常見的需求，它可以很好的和點擊事件區分開來，從而賦予
