Comment puis-je détecter le temps d'inactivité des utilisateurs en JavaScript pour optimiser les applications Web ?

Détection des temps d'inactivité en JavaScript

La détection des temps d'inactivité est essentielle pour optimiser l'expérience utilisateur dans les applications Web, comme le préchargement de contenu ou la déconnexion des utilisateurs inactifs. En JavaScript, le temps d'inactivité peut être défini comme une période d'inactivité de l'utilisateur ou une utilisation minimale du processeur.

Détection des temps d'inactivité avec Vanilla JavaScript

Pour détecter le temps d'inactivité avec Vanilla JavaScript, vous pouvez implémenter une fonction qui utilise les événements DOM pour surveiller l'activité des utilisateurs. Voici un exemple d'implémentation :

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

Appelez la fonction inactivityTime() pour initialiser la détection du temps d'inactivité si nécessaire, par exemple lors du chargement de la page :

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

Utilisation d'événements DOM supplémentaires

Pour améliorer la précision de la détection, vous pouvez ajouter davantage d'événements DOM pour surveiller les interactions des utilisateurs. Quelques événements couramment utilisés inclure :

• document.onload
• document.onmousemove
• document.onmousedown
• document. ontouchstart
• document.onclick
• document.onkeydown
• document.addEventListener('scroll', resetTimer, true) (Version améliorée pour gérer le défilement à l'intérieur des éléments défilants)

Gestion des événements dans la phase de capture

Pour garantir que les événements sont capturés pendant la phase de capture, utilisez le troisième argument dans addEventListener() comme suit :

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

En incorporant ces techniques, vous pouvez détecter efficacement les temps d'inactivité dans JavaScript et prendre les mesures appropriées pour améliorer le expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!