Ringkaskan dan kongsi beberapa kaedah untuk mengawal pemasa dengan lebih baik dengan bantuan CSS

Pemasa digunakan dalam banyak situasi dalam kerja harian, seperti pemuatan tertangguh, pertanyaan berjadual, dsb., tetapi kawalan pemasa kadangkala boleh menyusahkan sedikit, seperti apabila tetikus digerakkan untuk berhenti, Alih keluar dan mula semula. Kali ini saya akan memperkenalkan beberapa kaedah untuk mengawal pemasa dengan lebih baik dengan bantuan CSS Mari kita pelajari bersama-sama. Saya percaya ia boleh membawa pengalaman yang berbeza. [Pembelajaran yang disyorkan: tutorial video css]

1 Pencetus kelewatan tuding

Terdapat adegan sedemikian, apabila tetikus kekal pada elemen1s Peristiwa akan dicetuskan hanya kemudian, dan 1s tidak akan dicetuskan jika ia tidak berpuas hati. Kelebihannya ialah ia dapat mengelakkan kejadian yang kerap dicetuskan apabila tetikus bergerak dengan pantas. Jika ia dilaksanakan menggunakan js, ia mungkin kelihatan seperti ini

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

Bukankah ini berlaku? Tunggu, ini masih belum berakhir. Ia masih akan tercetus selepas tetikus pergi. Anda juga perlu membatalkan pemasa apabila tetikus pergi apabila menggunakan

Anda juga perlu mempertimbangkan

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

struktur bersarang

, kerana peristiwa ini masih akan dicetuskan semasa proses Ringkasnya, akan terdapat banyak butiran dan ia mudah dicetuskan silap-silap. mouseoutdomKini tibalah titik perubahan Jika anda meminjam CSS, anda boleh mengelakkan masalah di atas dengan berkesan Seperti berikut, tambahkan elemen tertunda pada elemen yang perlu dicetuskan >Di sini hanya Hanya perlukan gaya yang tidak penting Jika 父级 -> 子级 telah digunakan, anda boleh menggunakan yang lain, seperti

, yang juga boleh dilaksanakan. Kemudian tambahkan kaedah

pendengar transition

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

GlobalEventHandlers.ontransitionend - Rujukan Antara Muka API Web | MDN (mozilla.org) opacitytransform:translateZ(.1px)transitionend

ini Sudah berakhir. Tiada pemasa, tiada pembatalan, tidak perlu mempertimbangkan struktur

, pelaksanaan yang sempurna. Berikut ialah contoh kecil, yang tercetus selepas

tempoh masa

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

dom

Prinsipnya adalah sama seperti di atas kod lengkap boleh dilihat dalam demo dalam talian : hoverhover_alert (codepen.io) alert atau

hover_alert (runjs.work)

? perlu pada masa hadapan, anda boleh berhenti dan memikirkannya Banyak interaksi yang berkaitan dengan boleh dilaksanakan dengan cara ini 2. Tekan lama peristiwa pencetus

Tekan lama adalah. juga merupakan keperluan yang agak biasa, ia boleh menjadi acara yang sangat baik dan klik untuk memberikan lebih banyak keupayaan interaktif.

mouseoverTetapi tiada acara sedemikian dalam asli

Jika anda ingin melaksanakan acara akhbar lama, anda biasanya perlu menggunakan acara penekan pemasa dan tetikus, seperti berikut

<.>Ia adalah pemasa sekali lagi Senario membatalkan pemasa agak serupa dengan contoh sebelumnya Ia juga boleh dilaksanakan dengan bantuan CSS Memandangkan tetikus ditekan, ia boleh dikaitkan dengan

, jadi ia boleh dilaksanakan seperti ini:

dan bukankah kaedah pemantauan js

el.onmousedown = function(){
    this.timer && clearTimeout(this.timer);
    this.timer = settimeout(function(){
        //业务代码
    },1000)
}
el.onmouseup = function(){
    this.timer && clearTimeout(this.timer);
}

sangat mudah? Berikut ialah kes kecil yang pernah saya lakukan sebelum ini, yang melaksanakan pemilihan elemen pencetus tekan lama :active

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

transitionend Kod lengkap boleh dilihat demo dalam talian:

Long-. tekan pilihan kotak (codepen. io)

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

atau

Tekan lama kotak untuk memilih (runjs.work)

3 Karusel dan Jeda

Mari lihat a contoh yang lebih menarik, imej karusel . Biasanya imej karusel akan dimainkan secara automatik, dan kemudian imej karusel akan dijeda apabila tetikus Kaedah biasa adalah seperti berikut

Ia juga pemasa pembatalan dan tetapan. Sangat menjengkelkan untuk mengikat sekumpulan acara. Bolehkah saya mencuba cara lain? Sudah tentu, dengan animasi CSS, semuanya mudah.

berbeza daripada yang sebelumnya. Ini adalah

, yang boleh dicetuskan berulang kali. Betul, itu

animasi CSShover! Apabila animasi CSS ditetapkan kepada

, ia boleh gelung tanpa had Kesannya sangat serupa dengan pemasa ini dan animasi boleh dijeda dan dimainkan terus melalui

function autoPlay(){
  timer && clearInterval(timer)
  timer = setInterval(function(){
    // 轮播逻辑
  }, 1000)
}
autoPlay()
view.onmouseover = function(){
    timer && clearInterval(timer)
}
el.onmouseout = function(){
    autoPlay()
}

. Untuk memantau pencetus setiap animasi, anda boleh menggunakan kaedah

, yang bermaksud setiap kitaran animasi dicetuskan sekali

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

Atas ialah kandungan terperinci Ringkaskan dan kongsi beberapa kaedah untuk mengawal pemasa dengan lebih baik dengan bantuan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!