Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Mengesan Masa Terbiar Pengguna dalam JavaScript untuk Mengoptimumkan Aplikasi Web?

Bagaimanakah Saya Boleh Mengesan Masa Terbiar Pengguna dalam JavaScript untuk Mengoptimumkan Aplikasi Web?

Linda Hamilton
Linda Hamiltonasal
2024-12-14 13:47:10442semak imbas

How Can I Detect User Idle Time in JavaScript to Optimize Web Applications?

Pengesanan Masa Terbiar dalam JavaScript

Mengesan masa terbiar adalah penting untuk mengoptimumkan pengalaman pengguna dalam aplikasi web, seperti pramuat kandungan atau log keluar pengguna tidak aktif. Dalam JavaScript, masa terbiar boleh ditakrifkan sebagai tempoh tidak aktif pengguna atau penggunaan CPU yang minimum.

Pengesanan Masa Terbiar dengan JavaScript Vanila

Untuk mengesan masa terbiar dengan JavaScript vanila, anda boleh melaksanakan fungsi yang menggunakan acara DOM untuk memantau aktiviti pengguna. Berikut ialah contoh pelaksanaan:

var inactivityTime = function () {
  var time;
  window.onload = resetTimer;
  // DOM Events
  document.onmousemove = resetTimer;
  document.onkeydown = resetTimer;

  function logout() {
    alert("You are now logged out.");
    //location.href = 'logout.html'
  }

  function resetTimer() {
    clearTimeout(time);
    time = setTimeout(logout, 3000); // 1000 milliseconds = 1 second
  }
};

Panggil fungsi inactivityTime() untuk memulakan pengesanan masa melahu jika perlu, seperti pada pemuatan halaman:

window.onload = function () {
  inactivityTime();
};

Menggunakan Acara DOM Tambahan

Untuk meningkatkan ketepatan pengesanan, anda boleh menambah lebih banyak acara DOM untuk memantau interaksi pengguna. Beberapa acara yang biasa digunakan termasuk:

  • document.onload
  • document.onmousemove
  • document.onmousedown
  • document. ontouchstart
  • document.onclick
  • document.onkeydown
  • document.addEventListener('scroll', resetTimer, true) (Versi yang dipertingkatkan untuk mengendalikan penatalan di dalam elemen boleh ditatal)

Mengendalikan Peristiwa dalam Fasa Tangkap

Untuk memastikan peristiwa ditangkap semasa fasa tangkapan, gunakan hujah ketiga dalam addEventListener() seperti berikut:

window.addEventListener('load', resetTimer, true);
var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
events.forEach(function (name) {
  document.addEventListener(name, resetTimer, true);
});

Dengan menggabungkan teknik ini, anda boleh mengesan masa terbiar dalam JavaScript dengan berkesan dan mengambil tindakan yang sesuai untuk meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Masa Terbiar Pengguna dalam JavaScript untuk Mengoptimumkan Aplikasi Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn