8
votes

Baisser la fréquence de l'interrogation d'événements JavaScript

Comment abaissez-vous la fréquence du scrutin de l'événement JavaScript? Les événements que je suis préoccupé sont les onresize et Onscroll . Ces événements peuvent être déclenchés des dizaines de fois par seconde lorsque quelqu'un redimensionne leur navigateur ou défile, respectivement. J'aimerais que ces événements ne se produisent qu'une fois que toutes les 500 ms n'ont donc pas à passer des heures à optimiser mes manutentionnaires d'événement et à vous assurer qu'ils ne fuient pas de mémoire.


0 commentaires

6 Réponses :


11
votes
var resizeTimeout;

window.onresize = function() {
    if (resizeTimeout) {
        clearTimeout(resizeTimeout);
    }
    resizeTimeout = setTimeout(function() {
        // Do it!
    }, 500);

});
This will trigger the setTimeout() function ~500ms after the person has finished resizing.The onscroll version is very similar :)

4 commentaires

Celui-ci ne tirera pas tous les 500 ms, il ne tirera que 500 ms après que vous soyez arrêté / pause


+1 me frapper. N'oubliez pas d'inclure une vérification de resizetimeout car ce sera non défini la première fois.


@Andrey Ouais, je sais que j'ai mentionné ça. Il peut toujours convenir à l'OP.


@ALEX, appelant un gestionnaire après que les pauses / arrêts de redimensionnement est différente, cependant, que d'appeler un gestionnaire "Live" mais à un rythme moins zélé que que le navigateur a tendance à déclencher l'événement.



5
votes

Vous ne pouvez pas vraiment contrôler à quelle fréquence l'événement incendie, vous pouvez faire quelque chose comme si vous vous souviendrez de l'heure de la première sortie d'événement, puis sur chaque conséquence que vous vérifiez si elle est supérieure à 500 ms de la première - si oui, vous continuez. Avec le gestionnaire d'événements, sinon vous quittez simplement l'événement Hanlder


2 commentaires

+1 Pour cette réponse alors, c'est probablement ce que veut l'OP. Cependant, vous avez besoin d'une logique supplémentaire pour gérer le dernier événement de redimensionnement.


Je pense que la solution de minuterie prendra soin de la dernière épreuve de redimensionnement. La solution réelle serait donc une combinaison des deux



1
votes

Au début de votre gestionnaire, vérifiez si 500 ms se sont écoulés depuis la dernière et returnez-vous si non.


0 commentaires

1
votes

Vous ne pouvez pas empêcher ces événements de tirer. Ils font toujours. Ce que vous voulez faire, c'est arrêter d'écouter immédiatement, puis gérer l'événement pour éviter la répétition. Ensuite, le gestionnaire entier est à nouveau installé après la sécurité. Plus de récursivité ne se produit que si quelqu'un redimensionne la fenêtre. J'utilise 5000ms ici car il est plus facile de le voir travailler dans la console. Vous ne devriez pas voir plus d'un spam dans la console FF toutes les 5 secondes, même si vous redimensionnez-vous comme un spaz. XXX

Utilisation de la logique pour décider de décider de quelque chose à chaque fois que les incendies du gestionnaire sont toujours Terminez techniquement un gestionnaire et une instruction IF +. Qui peut devenir lourd.


1 commentaires

Wow. Je ne sais pas ce que les frais généraux sont d'ajouter / supprimer de manière dynamique le rappel auditeur, mais +1 pour être délicat, de toute façon. :)



1
votes

Vérifiez le soulignement Déboquez fonction

crée et renvoie une nouvelle version débotée de la fonction transmise qui repoussera son exécution jusqu'à après attendre les millisecondes se sont écoulées depuis la dernière fois qu'elle a été invoquée. Utile pour la mise en œuvre du comportement qui ne devrait se produire que lorsque l'entrée a cessé d'arriver. Par exemple: Rendre un aperçu d'un commentaire de marquage, recalculer une mise en page après que la fenêtre ait cessé d'être redimensionnée, et ainsi de suite. P> blockQuote>

Exemple: P>

window.onscroll = _.debounce(
  function() {
      // do something
  }, 500, false
);


0 commentaires

0
votes

J'avais l'habitude de le faire comme sur la réponse acceptée, mais le problème est que cela ne déclenche que après le délai imparti. Je voulais une solution qui gère le redimensionnement tout de suite, la première fois. Voici ce que j'ai fini par faire. XXX

J'espère que cela aidera.


0 commentaires