<listing id="z3xzv"><menuitem id="z3xzv"><meter id="z3xzv"></meter></menuitem></listing>
<address id="z3xzv"></address>
<noframes id="z3xzv"><address id="z3xzv"><listing id="z3xzv"></listing></address>

    <address id="z3xzv"><address id="z3xzv"><listing id="z3xzv"></listing></address></address><form id="z3xzv"><listing id="z3xzv"><meter id="z3xzv"></meter></listing></form><form id="z3xzv"></form><form id="z3xzv"><listing id="z3xzv"><meter id="z3xzv"></meter></listing></form>
    <noframes id="z3xzv">

    <form id="z3xzv"></form>
    溫馨提示×

    如何借助CSS 更好的控制定時器

    發布時間:2022-09-16 13:50:41 來源:億速云 閱讀:81 作者:栢白 欄目:web開發

    今天小編給大家分享的是如何借助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

    如何借助CSS 更好的控制定時器

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

    ?以后再碰到這樣的需要可以停下來思考一番,很多和mouseover有關的交互都可以用這種方式來實現

    二、長按觸發事件

    長按也是一個比較常見的需求,它可以很好的和點擊事件區分開來,從而賦予更多的交互能力。

    但是原生js中卻沒有這樣一個事件,如果要實現長按事件,通常需要借助定時器和鼠標按下事件,如下

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

    又是定時器和取消定時器的場景,和前面一個例子有些類似,也可以借助 CSS 來實現,由于是鼠標按下,可以聯想到:active,因此可以這樣來實現

    button:hover:active{
      opacity: .999; /*無關緊要的樣式*/
      transition: opacity 1s; /*延時 1s */
    }

    然后再監聽transitionend方法

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

    是不是非常方便呢?下面是以前做過的一個小案例,實現了長按觸發元素選中

    如何借助CSS 更好的控制定時器

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

    三、輪播和暫停

    再來看一個比較有意思的例子,輪播圖。

    通常輪播圖都會自動播放,然后鼠標hover時會暫停輪播圖,通常的做法是這樣的

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

    又是定時器的取消和設置,要綁定一堆事件,太煩人了,可以換種方式嗎?當然可以了,借助 CSS 動畫,一切都好辦了。

    和前面不太相同的是,這里是setInterval,可以重復觸發,那 CSS 中有什么可以重復觸發的呢?沒錯,就是 CSS 動畫!當 CSS 動畫設置次數為infinite就可以無限循環了,和這個定時器效果非常類似,而且可以直接通過:hover暫停和播放動畫。監聽每次動畫的觸發可以用animationiteration這個方法,表示每個動畫輪回就觸發一次

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

    所以用這種思路實現就是

    .view {
      animation: scroll 1s infinite; /*每1s動畫,無限循環*/
    }
    .view:hover{
      animation-play-state: paused; /*hover暫停*/
    }
    @keyframes scroll {
      to {
        transform: translateZ(.1px); /*無關緊要的樣式*/
      }
    }

    然后再監聽animationiteration事件

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

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

    下面是一個通過animationiteration來代替setInterval實現的輪播圖

    如何借助CSS 更好的控制定時器

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

    四、總結一下

    以上就是你可能不需要定時器的幾個替代方案,相比定時器而言,CSS 在控制定時器的開啟和暫停上更有優勢,下面總結一下

    • :hover配合transition延時、transitionend監聽可以實現鼠標經過延時觸發效果

    • :active配合transition延時、transitionend監聽可以實現長按觸發效果

    • CSS 動畫設置infinite后配合animationiteration監聽可以實現周期性觸發效果

    • 可以直接通過:hover來控制臺動畫的暫停和播放

    當然,可以利用的不僅僅是以上幾個案例,任何和 CSS 交互(:hover、:active)有類似功能的都可以朝這個方向去思考,是不是可以實現地更加優雅?

    關于如何借助CSS 更好的控制定時器就分享到這里了,希望以上內容可以對大家有一定的參考價值,可以學以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。

    推薦閱讀:CSS 、JS中怎么弄浪漫流星雨動畫

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    主題地圖

    日本亚洲一区二区
    <listing id="z3xzv"><menuitem id="z3xzv"><meter id="z3xzv"></meter></menuitem></listing>
    <address id="z3xzv"></address>
    <noframes id="z3xzv"><address id="z3xzv"><listing id="z3xzv"></listing></address>

      <address id="z3xzv"><address id="z3xzv"><listing id="z3xzv"></listing></address></address><form id="z3xzv"><listing id="z3xzv"><meter id="z3xzv"></meter></listing></form><form id="z3xzv"></form><form id="z3xzv"><listing id="z3xzv"><meter id="z3xzv"></meter></listing></form>
      <noframes id="z3xzv">

      <form id="z3xzv"></form>