• 技术文章 >web前端 >css教程

    总结分享几个借助 CSS 来更好的控制定时器的方法

    青灯夜游青灯夜游2022-09-16 20:22:11转载219

    大前端零基础入门到就业:进入学习

    平时工作中很多场合都要用到定时器,比如延迟加载、定时查询等等,但定时器的控制有时候会有些许麻烦,比如鼠标移入停止、移出再重新开始。这次介绍几个借助 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

    1.gif

    原理和上面一致,完整代码可以查看线上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', () => {
      // 具体逻辑
    })

    是不是非常方便呢?下面是以前做过的一个小案例,实现了长按触发元素选中

    2 (1).gif

    完整代码可以查看线上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实现的轮播图

    3.gif

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

    四、总结一下

    以上就是你可能不需要定时器的几个替代方案,相比定时器而言,CSS 在控制定时器的开启和暂停上更有优势,下面总结一下

    当然,可以利用的不仅仅是以上几个案例,任何和 CSS 交互(:hover:active)有类似功能的都可以朝这个方向去思考,是不是可以实现地更加优雅?

    (学习视频分享:web前端

    以上就是总结分享几个借助 CSS 来更好的控制定时器的方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:css
    上一篇:如何写出优雅耐看的css代码?css命名小技巧分享! 下一篇:巧妙利用 CSS 实现文字二次加粗和多重边框效果
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• css中的选择器包括超文本标记选择器吗• 巧用CSS实现鼠标跟随 3D 旋转效果,让交互更加生动!• 巧用 CSS混合模式 让文字智能适配背景颜色• CSS技巧分享:纯CSS实现表格响应式布局• 如何写出优雅耐看的css代码?css命名小技巧分享!
    1/1

    PHP中文网