欢送关注我的公众号：前端侦探

平时工作中很多场合都要用到定时器，比方提早加载、定时查问等等，但定时器的管制有时候会有些许麻烦，比方鼠标移入进行、移出再从新开始。这次介绍几个借助 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

原理和下面统一，残缺代码能够查看线上demo：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', () => {  // 具体逻辑})

是不是十分不便呢？上面是以前做过的一个小案例，实现了长按触发元素选中

残缺代码能够查看线上demo：长按框选 (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实现的轮播图

残缺代码能够查看线上demo：css_banner(runjs.work)

四、总结一下

以上就是你可能不须要定时器的几个代替计划，相比定时器而言，CSS 在管制定时器的开启和暂停上更有劣势，上面总结一下

  1. :hover配合transition延时、transitionend监听能够实现鼠标通过延时触发成果
  2. :active配合transition延时、transitionend监听能够实现长按触发成果
  3. CSS 动画设置infinite后配合animationiteration监听能够实现周期性触发成果
  4. 能够间接通过:hover来控制台动画的暂停和播放

当然，能够利用的不仅仅是以上几个案例，任何和 CSS 交互（:hover、:active）有相似性能的都能够朝这个方向去思考，是不是能够实现地更加优雅？

最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

欢送关注我的公众号：前端侦探