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

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

一、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)，從而賦予