CSS を利用してタイマーをより適切に制御するためのいくつかの方法を要約して共有します。

タイマーは、遅延読み込みやスケジュールされたクエリなど、日常業務のさまざまな場面で使用されますが、マウスの操作など、タイマーの制御が少し面倒になることがあります。移動して停止し、削除して再度開始します。今回はCSSを使ってタイマーをコントロールする方法をいくつか紹介しますので、ぜひ一緒に学んでみてください。 [推奨学習: css ビデオ チュートリアル ]

1. ホバー遅延トリガー

マウスが要素上に留まると、このようなシーンがあります。イベントは 1s 後にトリガーされ、1s に満足しない場合はイベントがトリガーされないため、マウスの動きが速い場合にイベントが頻繁にトリガーされることを回避できるという利点があります。 jsで実装するとこんな感じになるかも知れません

var timer = null
el.addEventListener('mouseover', () => {
  timer && clearTimeout(timer)
  timer = setTimeout(() => {
    // 具体逻辑
  }, 1000)
})

こんな感じではないでしょうか？待ってください、これはまだ終わっていません。これは遅延を実現するだけです。マウスが離れた後もトリガーされます。また、マウスが離れたときにタイマーをキャンセルする必要があります。

el.addEventListener('mouseout', () => {
  timer && clearTimeout(timer)
})

さらに、

は使用していますmouseoutこれらのイベントは parent->child プロセス中に引き続きトリガーされるため、dom ネスト構造 についても考慮する必要があります。 、詳細がたくさんあり、誤ってトリガーするのは簡単です。

ここで転換点が来ます。CSS を借用すると、上記の問題を効果的に回避できます。以下のように、まず遅延

transition

button:hover{
  opacity: 0.999; /*无关紧要的样式*/
  transition: 0s 1s opacity; /*延时 1s */
}

を要素に追加します。トリガーする必要があります。ここでは無関係なスタイルを 1 つだけで十分です。

opacity がすでに使用されている場合は、transform:translateZ(.1px) などの他のスタイルを使用できます。も実現可能です。次に、リスナー transitionendmethod

GlobalEventHandlers.ontransitionend - Web API インターフェイス リファレンス | MDN (mozilla.org)

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

# を追加します。 ＃ ＃これで終わりだ。タイマーやキャンセルはなく、

dom

構造を考慮する必要もなく、完璧な実装です。 以下は小さな例で、

ホバー

を一定期間続けた後にトリガーされますアラート

原則は上記と一致しており、完全なコードはオンライン デモでご覧いただけます:

hover_alert (codepen.io)

または hover_alert(runjs.work)

? 今後、この問題に再び遭遇する可能性がありますか? 必要に応じて、立ち止まって考えることができます。

mouseover

に関連する多くのインタラクションは、この方法で実装できます。 2. 長押しトリガー イベント 長押し 押すことも比較的一般的な要件であり、クリック イベントと明確に区​​別できるため、よりインタラクティブな機能が得られます。

しかし、ネイティブ

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 */
}

それからもう一度聞いてください

transitionendmethod

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

とても便利ではないでしょうか?以下は、私が以前に行った小さなケースで、長押しトリガー要素の選択を実装しています。

完全なコードはオンライン デモでご覧いただけます:

長押しボックスの選択 (codepen.io)

orボックスを長押しして選択 (runjs.work)

3. カルーセルと一時停止さらに見てみましょう興味深い例として、カルーセル画像があります。

通常、カルーセル画像は自動的に再生され、マウス

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 メソッドを使用できます。これは、各アニメーション サイクルが 1 回トリガーされることを意味します

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前端）

以上がCSS を利用してタイマーをより適切に制御するためのいくつかの方法を要約して共有します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。