Réduisez la fréquence des sondages d'événement Javascript

Question

Comment abaisser la fréquence du vote des événements javascript? Les événements que je suis préoccupé par sont onResize et OnScroll . Ces événements peuvent être déclenchés des dizaines de fois par seconde lorsque quelqu'un redimensionne son navigateur ou fait défiler, respectivement. Je voudrais que ces événements se produire qu'une fois tous les 500 ms, donc je ne dois pas passer des heures à optimiser mes gestionnaires d'événements et faire en sorte qu'ils ne le font pas fuite de mémoire.

Answer 1

var resizeTimeout;

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

});

Cela déclenchera la fonction setTimeout() ~ 500ms après que la personne a fini Redimensionnement.

La version onscroll est très similaire:)

Answer 2

Vous ne pouvez pas vraiment contrôler la fréquence des feux de l'événement, vous pouvez faire quelque chose comme se rappeler le moment de la première mise à feu de l'événement, puis sur chaque conséquence que vous vérifiez si elle est plus de 500 ms de première - si oui, vous passez avec le gestionnaire d'événements, sinon vous quittez juste le hanlder événement

Answer 3

Au début de votre gestionnaire, vérifiez si 500ms se sont écoulés depuis le dernier, et juste revenir sinon.

Answer 4

Vous ne pouvez pas empêcher ces événements de tir. Ils le font toujours. Ce que vous voulez faire est d'arrêter immédiatement l'écoute, puis gérer l'événement pour éviter la répétition. Ensuite, l'ensemble du gestionnaire est mis en place à nouveau après setTimeout. Plus de récursion arrive à moins que 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 console plus d'un spam dans FF toutes les 5 secondes, même si vous redimensionnez comme un spaz.

(function staggerListen(){
  window.onresize = function(){
    window.onresize = false;
    console.log('spam');
    setTimeout(staggerListen,5000);
  };
})()

En utilisant la logique de décider de faire quoi que ce soit à chaque fois que les feux de gestionnaire est toujours techniquement tiré un gestionnaire et une instruction if + recherche. Cela peut obtenir lourd.

Answer 5

vérifier la fonction debounce

  

Crée et retourne une nouvelle version de la fonction anti-rebond passé qui retarder son exécution qu'après millisecondes d'attente se sont écoulés depuis la dernière fois qu'il a été invoqué. Utile pour le comportement mise en œuvre qui ne devrait se produire après l'entrée a cessé d'arriver. Par exemple:. Rendu un aperçu d'un commentaire Markdown, recalcul une mise en page après la fenêtre a cessé d'être redimensionné, etc.

Exemple:

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

Answer 6

Je fabriquais comme la réponse acceptée mais le problème est, il déclenche seulement après le délai spécifié. Je voulais une solution qui gère le redimensionnement tout de suite, la première fois. Voici ce que je fini par faire.

var _resize_is_busy = false;
var _resize_scheduled = false;
var _resize_precision = 100;

// This register for window resize events. No need to change anything.
$(window).resize(function () {

    if (!_resize_is_busy) {

        // call the scheduler who will do the work and set a timer to
        // check of other resizes occured within a certain period of time

        _resize_scheduler();
    }
    else {

        // the resizer is busy, i.e. a resize have been handled a little
        // time ago and then the scheduler is waiting some time before 
        // handling any other resize. This flag tells the scheduler that
        // a resize event have been receive while he was sleeping.

        _resize_scheduled = true;
    }
});

// This is the scheduler. No need to change anything.
var _resize_scheduler = function () {

    _resize_is_busy = true;
    _resize_scheduled = false;

    setTimeout(function () {

        _resize_is_busy = false;

        if (_resize_scheduled) 
            _handle_resize();

    }, _resize_precision);

    _handle_resize();
}

var _handle_resize = function () {

    console.log('DOING ACTUAL RESIZE');

    // do the work here
    //...
}

J'espère que cela aide.