社区精选 | 还在用定时器吗?借助 CSS 来监听事件
今天小编为大家带来的是社区作者 XboxYan 的文章,让我们一起来学习几个借助 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):https://developer.mozilla.org/zh-CN/docs/Web/API/Element/transitionend_event
el.addEventListener('transitionend', () => {
// 具体逻辑
})
这就结束了。无需定时器,也无需取消,更无需考虑 dom 结构,完美实现。
下面是一个小实例,在hover一段时间后触发alert
原理和上面一致,完整代码可以查看线上demo:https://runjs.work/projects/db0bdceb7cd343f9
关注公众号:拾黑(shiheibook)了解更多 赞助链接:
关注数据与安全,洞悉企业级服务市场:https://www.ijiandao.com/
四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
让资讯触达的更精准有趣:https://www.0xu.cn/

随时掌握互联网精彩
- 【有料视频】为什么iPhone坚持用直屏?
- 2022年全球电信设备市场报告:增长放缓至3% 华为稳居头号供应商
- 【杂谈快报】杭州市与阿里巴巴签订全面深化战略合作协议;特斯拉中国三天获3万辆订单
- 迪士尼这部影片让我看到了AR观影的未来
- 微软Edge 105升级致浏览器罢工?官方解决方法来了
- 微软中国“三十年之约”:携手本土合作伙伴,共同拥抱数字未来
- 数百亿市场的血管介入手术机器人赛道,睿心医疗如何构筑起壁垒?
- 微软正式“封杀” UWP:建议开发者转向 Windows APP SDK 作为 APP 开发的未来
- 三云两网战略落地,新华三X10000助力中国移动数智化转型
- 不再独享彩蛋!微软向其他浏览器开放Edge的冲浪小游戏
- 央视《对话》统信刘闻欢:解读中国操作系统发展之道(附完整视频)
- 苹果第二颗自研处理器曝光,PS5国行版或于本月发布