乐趣区

关于前端:还在用定时器吗借助-CSS-来监听事件

jiezi

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

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

原理和下面统一，残缺代码能够查看线上 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）有相似性能的都能够朝这个方向去思考，是不是能够实现地更加优雅？🤔

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

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

退出移动版