还在用定时器吗?借助 CSS 来监听事件

更新日期: 2022-09-14阅读: 305标签: 定时器作者: XboxYan

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

el.addEventListener('transitionend', () => {
  // 具体逻辑
})

这就结束了。无需定时器,也无需取消,更无需考虑 dom 结构,完美实现。

下面是一个小实例,在hover一段时间后触发alert。


原理和上面一致,完整代码可以查看线上demo:hover_alert (codepen.io)[2]或者hover_alert(runjs.work)[3]。

以后再碰到这样的需要可以停下来思考一番,很多和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', () => {
  // 具体逻辑
})

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


完整代码可以查看线上demo:长按框选 (codepen.io)[4]或者长按框选 (runjs.work)[5]。

三、轮播和暂停

再来看一个比较有意思的例子,轮播图。

通常轮播图都会自动播放,然后鼠标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)[6]。

所以用这种思路实现就是;

.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实现的轮播图。


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

四、总结一下

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

  • :hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果。
  • :active配合transition延时、transitionend监听可以实现长按触发效果。
  • CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果。
  • 可以直接通过:hover来控制台动画的暂停和播放。

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

来源: 前端侦探

链接: https://www.fly63.com/article/detial/12126

js中setTimeout和setInterval的深入理解:它们之间的区别,原理,“异步“等

这篇文章将带你深入理解js中定时器是如何工作的,setTimeout和setInterval的原理是什么?

为什么尽量别用setInterval

在开发一个在线聊天工具时,经常会有过多少毫秒就重复执行一次某操作的需求。“没问题”,大家都说,“用setInterval好了。”我觉得这个点子很糟糕。

你可能不知道的setInterval的坑

之前印象中一直记得setInterval有一些坑,但是一直不是很清楚那些坑是什么。setInterval会无视代码的错误、setInterval会无视任何情况下定时执行、、setInterval不能确保每次调用都能执行

setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法

setInterval()和setTimeout()方法都是js原生的定时方法,当然它们两个的作用也是不同的,并且最近在做上下滚动公告栏的时候,发现了setInterval()非常令人抓狂的问题,那就是用setInterval()做的定时滚动会随着浏览器页面切换变得无法控制!为什么会说无法控制呢

如何通过setTimeout理解JS运行机制详解

setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行。它返回一个整数,表示定时器timer的编号,可以用来取消该定时器。JavasScript引擎是基于事件驱动和单线程执行的,JS引擎一直等待着任务队列中任务的到来

node-schedule 全局内关闭定时器

用Cron表达式完成定时器,全局内关闭定时器需要获取到定时器的引用,scheduleJob存在第四个参数,然而readme中没有提及,可知API

js 随机点名

主要是利用定时器,点击开始IDE时候不断的执行,并同时生成随机数,利用数组的下标完成展示。主要用到的知识点:setInterval,Math.random()

js定时器setTiemout、setInterval

JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下。

Js定时器越走越快的问题

之前在项目中写了定时器来做循环播放,但是总是会有越走越快的问题,开始是以为前后的HTML代码拼接的有问题,时间紧急的情况下反复改了很多也没什么效果,后来发现是js定时器的问题,在这里记录一下。

JS 定时器的4种写法及介绍

JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。setTimeout: 设置一个定时器,在定时器到期后执行一次函数或代码段

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!