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

平时工作中很多场合都要用到定时器,比如延迟加载、定时查询等等,但定时器的控制有时候会有些许麻烦,比如鼠标移入停止、移出再重新开始。这次介绍几个借助 CSS 来更好的控制定时器的方法,一起了解一下吧,相信可以带来不一样的体验。

一、hover 延时触发

有这样一个场景,在鼠标停留在一个元素上1s后才触发事件,不满1s就不会触发,这样的好处是,可以避免鼠标在快速划过时,频繁的触发事件。如果是用js来实现,可能会这样

var timer = nullel.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 更好的控制定时器,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/26189

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云认证作者
上一篇 2022年9月16日 下午10:38
下一篇 2022年9月16日 下午10:39

相关推荐

  • css中id选择符的标识是哪个

    在css中,id选择符的标识是“#”,可以为标有特定id属性值的HTML元素指定特定的样式,语法结构“#ID值 {属性 : 属性值;}”。ID属性在整个页面中是少数不可重复的;ID属性值不要以数字开头,数字开头的ID在Mozilla/Firefox浏览器中不起作用。 本教程操作环境:windows7…

    2022年9月22日
    51300
  • Redis有序集合zset知识点有哪些

    redis有序集合zset与普通集合set非常相似,是一个没有重复元素的字符串集合。 不同之处是有序集合的每个成员都关联了一个评分(score),这个评分(score)被用来按照从最低分 到较高分的方式排序集合中的成员。 集合的成员是少数的,但是评分是可以重复的。 因为元素是有序的,所以你可以很快的…

    2022年9月21日
    63500
  • MySql如何查出符合条件的最新数据行

    结合示例: 这是一张记录人员来访的记录表。 数据表里的数据准确记录了每个人来访时带的帽子颜色、时间、人员编码(每个人少数)。 数据样例: 需要做到的是 : 拿出符合条件的最新的来访记录。 你会最怎么做? 先实现一点的, 取出 A101 这个人员编码的 最新来访记录 。 首先先展示错误的sql示例: …

    2022年9月16日
    49600
  • 电脑蓝屏代码0xc000000d如何修复

    蓝屏代码0xc000000d修复方法: 问题分析: 1、首先,如果我们突然断点关机或关机前出现卡顿,都可能造成磁盘受损,引发问题。 2、当我们使用电脑,比如:玩游戏、看视频、操作大的东西、使用电脑时间长或着是下载了不合适的东西都会出现这个问题。 PS:如果是这个问题引起的,只要注意自己的电脑不卡机、…

    2022年9月16日
    1.0K00
  • 使用ajax要不要引入jquery

    使用ajax不需要引入jquery;ajax全称是“Asynchronous javascript and XML”,也即异步JavaScript和XML,是指一种创建交互网页应用的网页开发技术,JavaScript原本就支持ajax,若是使用原生的ajax请求,当然不需要引入jquery。 本文操…

    2022年8月31日
    62300
  • sql与mysql有哪些区别

    区别:1、SQL是一种结构化查询语言,而MySQL是一种数据库软件,使用SQL语言来查询数据库;2、SQL不提供连接工具,而MySQL提供工具,可用一个名为“MySQL工作台”的集成工具来设计和开发数据库;3、SQL用于查询和操作数据库系统,而MySQL用于以表格格式处理、存储、检索、修改和管理数据…

    2022年9月24日
    1.3K00
  • VSCode中如何添加Emmet快捷键

    Emmet 是一个自动将代码片段扩展为 HTML 的工具。它包含在 VS Code 中。 例如以下片段: div.someClass>span*5 将展开为: <div class=”someClass”> <span></span> <span&gt…

    2022年9月8日
    85100
  • mysql主从复制怎么理解

    在mysql中,主从复制是指数据可以从一个MySQL数据库服务器主节点复制到一个或多个从节点,默认采用异步复制方式。采用主从复制的好处:1、让主库负责写,从库负责读,当主库出现了锁表的情景,通过读从库也可以保证业务的正常运作;2、可以做数据的热备;3、进行架构的扩展,可降低磁盘I/O访问的频率,提高…

    2022年9月20日
    76000
  • MySQL全局锁指的是什么

    数据库设计的初衷是处理并发问题的,作为多用户共享的资源,当出现并发访问时,数据库需要合理地控制资源的访问规则。而锁就是用来实现这个访问规则的重要数据结构。 我们先来贴一个锁的大概分类的图 根据加锁的范围,MySQL 里面的锁大致可以分为全局锁、表锁、行锁。我们主要先来学习这几种锁,这篇我们学习全局锁…

    2022年9月26日
    51000
  • jquery版本2.x和3.x的区别有哪些

    区别:1、2.x不再更新,官方只做BUG维护,功能不再新增;3.x是官方主要更新维护的版本,功能持续新增。2、3.x支持“for…of ”循环语句,2.x不支持“。3、2.x利用setInterval来实现动画,3.x支采用requestAnimationFrame()来实现动画。4、3…

    2022年9月8日
    1.2K00
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部