Fassen Sie mehrere Methoden zusammen und teilen Sie sie, um Timer mithilfe von CSS besser zu steuern

Timer werden in vielen Situationen der täglichen Arbeit verwendet, z. B. bei verzögertem Laden, geplanten Abfragen usw. Die Steuerung von Timern ist jedoch manchmal etwas mühsam, z. B. das Hineinfahren zum Anhalten, das Herausfahren und das anschließende Neustarten . Dieses Mal werde ich einige Methoden vorstellen, um den Timer mithilfe von CSS besser zu steuern. Ich glaube, dass dies zu einem anderen Erlebnis führen kann. [Empfohlenes Lernen: CSS-Video-Tutorial]

1. Hover-Verzögerungsauslöser

Es gibt ein Szenario, in dem das Ereignis ausgelöst wird, nachdem die Maus auf einem Element 1s bleibt, was unbefriedigend ist 1s wird nicht ausgelöst. Dies hat den Vorteil, dass häufiges Auslösen von Ereignissen vermieden werden kann, wenn sich die Maus schnell bewegt. Wenn es mit js implementiert wird, könnte es so aussehen1s后才触发事件，不满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 (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', () => {
  // 具体逻辑
})

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

完整代码可以查看线上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

.view {
  animation: scroll 1s infinite; /*每1s动画，无限循环*/
}
.view:hover{
  animation-play-state: paused; /*hover暂停*/
}
@keyframes scroll {
  to {
    transform: translateZ(.1px); /*无关紧要的样式*/
  }
}

Ist das nicht der Fall? Warten Sie, das ist noch nicht vorbei. Es wird immer noch ausgelöst, wenn die Maus geht. Außerdem müssen Sie den Timer abbrechen, wenn Sie mouseout Sie müssen die verschachtelte <code>dom-Struktur berücksichtigen, da diese Ereignisse weiterhin während des parent->-Prozesses ausgelöst werden wird viele Details enthalten. Es ist leicht, sie versehentlich auszulösen. 🎜🎜Jetzt kommt der Wendepunkt, um die oben genannten Probleme effektiv zu vermeiden. Fügen Sie dem Element, das ausgelöst werden muss, zunächst einen verzögerten <code>transition hinzu ein unbedeutender Stil reicht aus. Wenn opacity bereits verwendet wurde, können Sie andere verwenden, z. B. transform:translateZ(.1px), was auch möglich ist. Fügen Sie dann die Listener-Methode transitionend hinzu 🎜

🎜GlobalEventHandlers.ontransitionend - Web-API-Schnittstellenreferenz | MDN (mozilla.org)🎜🎜

view.addEventListener("animationiteration", () => {
  // 轮播逻辑
})

🎜Das ist es. Kein Timer, kein Abbruch, keine Notwendigkeit, die dom-Struktur zu berücksichtigen, perfekte Implementierung. 🎜🎜Das Folgende ist ein kleines Beispiel, das einen Alarm nach einem Hover für einen bestimmten Zeitraum auslöst🎜🎜🎜🎜Das Prinzip ist das gleiche wie oben. Der vollständige Code kann in der Online-Demo eingesehen werden : hover_alert (codepen.io)🎜oder hover_alert(runjs.work)🎜🎜

🎜? Wenn Sie in Zukunft auf einen solchen Bedarf stoßen, Sie können innehalten und darüber nachdenken. Auf diese Weise können relevante Interaktionen realisiert werden🎜

2 Triggerereignis drücken🎜🎜Langes Drücken ist ebenfalls eine relativ häufige Anforderung. Es kann gut von Klickereignissen unterschieden werden und bietet somit mehr interaktive Möglichkeiten. 🎜🎜Aber in nativem js gibt es kein solches Ereignis. Wenn Sie ein langes Drücken-Ereignis implementieren möchten, müssen Sie normalerweise einen Timer und ein Maus-Drücken-Ereignis verwenden Den Timer abbrechen. Die Szene ähnelt in gewisser Weise dem vorherigen Beispiel. Sie kann auch mit Hilfe von CSS implementiert werden. Da es sich um einen Mausklick handelt, kann sie mit :active verknüpft werden so implementiert werden 🎜rrreee🎜 und dann transitionend anhören. Ist die Methode 🎜rrreee🎜 nicht sehr praktisch? Das Folgende ist ein kleiner Fall, den ich zuvor gemacht habe und der ein langes Drücken implementiert, um die Elementauswahl auszulösen🎜🎜🎜🎜Der vollständige Code kann als Online-Demo angesehen werden: Lang drücken, um das Feld auszuwählen (codepen.io)🎜oder Lang drücken, um das Feld auszuwählen (runjs.work)🎜🎜

3. Karussell und Pause🎜🎜Schauen wir uns ein interessanteres Beispiel an, das Karusselldiagramm. 🎜🎜Normalerweise wird das Karussellbild automatisch abgespielt und dann angehalten, wenn die Maus schwebt. Die übliche Methode ist wie folgt: 🎜rrreee🎜Es ist auch das Abbrechen und Einstellen des Timers. was eine Menge Bindungen erfordert. Das Ereignis ist so nervig. Kann es anders gemacht werden? Mit CSS-Animationen ist das natürlich ganz einfach. 🎜🎜Der Unterschied zum vorherigen besteht darin, dass dies setInterval ist, das wiederholt ausgelöst werden kann. Was kann also in CSS wiederholt ausgelöst werden? Das ist richtig, es ist eine CSS-Animation! Wenn die CSS-Animation auf unendlich eingestellt ist, kann sie in einer Endlosschleife ausgeführt werden. Der Effekt ist diesem Timer sehr ähnlich und die Animation kann angehalten und direkt über :hover abgespielt werden. Um das Auslösen jeder Animation zu überwachen, können Sie die Methode animationiteration verwenden, was bedeutet, dass jeder Animationszyklus einmal ausgelöst wird🎜

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(codepen.io)或者css_banner(runjs.work)

四、总结一下

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

• :hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果

• :active配合transition延时、transitionend监听可以实现长按触发效果

• CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果

• 可以直接通过:hover来控制台动画的暂停和播放

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

（学习视频分享：web前端）

Das obige ist der detaillierte Inhalt vonFassen Sie mehrere Methoden zusammen und teilen Sie sie, um Timer mithilfe von CSS besser zu steuern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!