Bagaimanakah Saya Boleh Mengesan Masa Terbiar dalam JavaScript untuk Mengoptimumkan Kandungan Pra-pengambilan dan Pra-pemuatan?

Mengesan Masa Terbiar dalam JavaScript: Panduan untuk Pra-mengambil dan Pramuat Kandungan

Dalam pembangunan web, mengesan masa terbiar boleh menjadi penting untuk mengoptimumkan pengalaman pengguna. Masa terbiar, yang ditakrifkan sebagai tempoh tidak aktif pengguna atau penggunaan CPU yang minimum, memberikan peluang untuk pra-mengambil atau pramuat kandungan, mengurangkan masa memuatkan halaman dan meningkatkan tindak balas.

Melaksanakan Pengesanan Masa Terbiar dalam JavaScript Vanila

Untuk mendayakan pengesanan masa terbiar dalam JavaScript Vanila, gunakan yang berikut pendekatan:

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
    }
};

Permulaan dan Penyesuaian

Setelah fungsi tidak aktif ditakrifkan, mulakan ia di tempat yang dikehendaki (cth., onPageLoad):

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

Anda boleh menyesuaikan lagi pendengar acara dengan menambahkan lebih banyak acara DOM, termasuk:

document.onload = resetTimer;
document.onmousemove = resetTimer;
document.onmousedown = resetTimer; // touchscreen presses
document.ontouchstart = resetTimer;
document.onclick = resetTimer;     // touchpad clicks
document.onkeydown = resetTimer;   // onkeypress is deprectaed
document.addEventListener('scroll', resetTimer, true); // improved; see comments

Atau, daftarkan acara secara dinamik menggunakan tatasusunan:

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

Perhatikan bahawa window.onscroll tidak akan dicetuskan jika penatalan berlaku dalam elemen boleh ditatal. Untuk menangani perkara ini, masukkan argumen ketiga dalam window.addEventListener('scroll', resetTimer, true) untuk menangkap acara semasa fasa tangkapan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Masa Terbiar dalam JavaScript untuk Mengoptimumkan Kandungan Pra-pengambilan dan Pra-pemuatan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!