Différence entre la limitation et le rebond d'une fonction

Quelqu'un peut-il me donner une explication en termes simples de la différence entre la limitation et le rebond d'une fonction à des fins de limitation de débit.

Pour moi, les deux semblent faire la même chose. J'ai vérifié ces deux blogs pour savoir:

http://remysharp.com/2010/07/21/throttling-function-calls

http://benalman.com/projects/jquery-throttle-debounce-plugin/

Pour le dire simplement:

• La limitation retardera l'exécution d'une fonction. Cela réduira les notifications d'un événement qui se déclenche plusieurs fois.
• Le rebouncing regroupera une série d'appels séquentiels à une fonction en un seul appel à cette fonction. Il garantit qu'une seule notification est effectuée pour un événement qui se déclenche plusieurs fois.

Vous pouvez voir visuellement la différence ici

Si vous avez une fonction qui est souvent appelée - par exemple lorsqu'un événement de redimensionnement ou de déplacement de la souris se produit, elle peut être appelée plusieurs fois. Si vous ne souhaitez pas ce comportement, vous pouvez le limiter afin que la fonction soit appelée à intervalles réguliers. Le rebond signifie qu'il est appelé à la fin (ou au début) d'un groupe d'événements.

Personnellement, j'ai trouvé le rebond plus difficile à comprendre que l' accélérateur .

Comme les deux fonctions vous aident à reporter et à réduire le taux d'exécution. En supposant que vous appelez des fonctions décorées renvoyées par la manette des gaz / anti-rebond à plusieurs reprises ...

• Throttle : la fonction d'origine doit être appelée au plus une fois par période spécifiée.
• Anti - rebond : la fonction d'origine doit être appelée après que l'appelant cesse d'appeler la fonction décorée après une période spécifiée .

J'ai trouvé la dernière partie du debounce cruciale pour comprendre l'objectif qu'elle essaie d'atteindre. J'ai également trouvé une ancienne version de l'implémentation de _.debounce aide à la compréhension (avec la permission de https://davidwalsh.name/function-debounce ).

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

Une métaphore farfelue, mais peut-être pourrait aussi aider.

Vous avez un ami nommé Chatty qui aime vous parler via IM. En supposant que lorsqu'elle parle, elle envoie un nouveau message toutes les 5 secondes, tandis que l'icône de votre application de messagerie instantanée rebondit de haut en bas, vous pouvez prendre la ...

• Approche naïve : vérifiez chaque message tant qu'il arrive. Lorsque l'icône de votre application rebondit, vérifiez. Ce n'est pas le moyen le plus efficace, mais vous êtes toujours à jour.
• Approche des gaz : vous vérifiez une fois toutes les 5 minutes (quand il y en a de nouvelles). Lorsqu'un nouveau message arrive, si vous avez vérifié à tout moment au cours des 5 dernières minutes, ignorez-le. Vous économisez votre temps avec cette approche, tout en restant dans la boucle.
• Approche anti-rebond : vous connaissez Chatty, elle décompose toute une histoire en morceaux, les envoie dans un message après l'autre. Vous attendez que Chatty termine toute l'histoire: si elle arrête d'envoyer des messages pendant 5 minutes, vous supposeriez qu'elle a terminé, maintenant vous vérifiez tout.

Différences

+--------------+-------------------+-------------------+
|              |  Throttle 1 sec   |  Debounce 1 sec   |
+--------------+-------------------+-------------------+
| Delay        | no delay          | 1 sec delay       |
|              |                   |                   |
| Emits new if | last was emitted  | there is no input |
|              | before 1 sec      |  in last 1 sec    |
+--------------+-------------------+-------------------+

Explication par cas d'utilisation :

• Barre de recherche - Vous ne voulez pas rechercher chaque fois que l'utilisateur appuie sur la touche? Vous souhaitez effectuer une recherche lorsque l'utilisateur a arrêté de taper pendant 1 seconde. Appuyez debounce1 seconde sur la touche.

• Jeu de tir - Le pistolet prend 1 seconde entre chaque tir mais l'utilisateur clique plusieurs fois sur la souris. Utiliser throttlesur clic de souris.

Inverser leurs rôles :

• Limitation 1 s sur la barre de recherche - Si les utilisateurs tapent abcdefghijavec chaque caractère dans 0.6 sec. Ensuite, l'accélérateur se déclenchera à la première apression. Il ignorera chaque pression pendant 1 seconde, c.- bà- d. À 0,6 sec sera ignoré. Puis, cà 1,2 seconde, le déclenchement se déclenchera à nouveau, ce qui réinitialise à nouveau l'heure. Il dsera donc ignoré et esera déclenché.

• Pistolet anti-rebond pendant 1 s - Lorsque l'utilisateur voit un ennemi, il clique sur la souris, mais il ne tirera pas. Il cliquera à nouveau plusieurs fois dans cette seconde mais il ne tirera pas. Il verra s'il a encore des balles, à ce moment-là (1 sec après le dernier clic) le pistolet se déclenchera automatiquement.

La limitation impose un nombre maximal de fois qu'une fonction peut être appelée dans le temps. Comme dans "exécuter cette fonction au plus une fois toutes les 100 millisecondes".

Le rebouncing impose qu'une fonction ne soit pas appelée à nouveau jusqu'à ce qu'un certain laps de temps se soit écoulé sans qu'elle soit appelée. Comme dans "n'exécuter cette fonction que si 100 millisecondes se sont écoulées sans qu'elle soit appelée".

ref

Throttle (1 sec): Bonjour, je suis un robot. Tant que vous continuez à me cingler, je continuerai à vous parler, mais après exactement 1 seconde chacun. Si vous me cinglez pour une réponse avant qu'une seconde ne soit écoulée, je vous répondrai toujours à 1 seconde d'intervalle exactement. En d'autres termes, j'aime juste répondre à intervalles précis.

Debounce (1 sec): Salut, je suis le cousin de ce robot ^^. Tant que vous continuez à me cingler, je vais rester silencieux parce que j'aime répondre seulement après que 1 seconde se soit écoulée depuis la dernière fois que vous m'avez cinglé . Je ne sais pas, si c'est parce que j'ai un problème d'attitude ou parce que je n'aime pas interrompre les gens. En d'autres termes, si vous continuez à me demander des réponses avant 1 seconde depuis la dernière invocation, vous n'obtiendrez jamais de réponse. Ouais ouais ... vas-y! appelez-moi impoli.

Accélérateur (10 min): je suis un enregistreur. J'envoie des journaux système à notre serveur principal, après un intervalle régulier de 10 minutes.

Debounce (10 sec): Salut, je ne suis pas le cousin de cette machine d'enregistrement. (Tous les debouncer ne sont pas liés à un étrangleur dans ce monde imaginaire). Je travaille comme serveur dans un restaurant voisin. Je dois vous informer que tant que vous continuerez à ajouter des éléments à votre commande, je n'irai pas dans la cuisine pour exécuter votre commande. Ce n'est que lorsque 10 secondes se sont écoulées après la dernière modification de votre commande que je suppose que vous avez terminé votre commande. Ce n'est qu'alors que j'exécuterai votre commande dans la cuisine.

Démos sympas: https://css-tricks.com/debouncing-throttling-explained-examples/

Crédits pour l'analogie du serveur: https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

L'anti-rebond vous permet de gérer la fréquence des appels qu'une fonction peut recevoir. Il combine plusieurs appels qui se produisent sur une fonction donnée afin que les appels répétés qui se produisent avant l'expiration d'une durée spécifique soient ignorés. Fondamentalement, l'anti-rebond garantit qu'un seul signal est envoyé pour un événement qui peut se produire plusieurs fois.

La limitation limite la fréquence des appels reçus par une fonction à un intervalle de temps fixe. Il permet de s'assurer que la fonction cible n'est pas invoquée plus souvent que le délai spécifié. La limitation est la réduction du taux d'un événement répétitif.

C'est simple.

Ils font exactement la même chose (limitation de débit), sauf pendant que la manette des gaz est appelée, cela déclenchera votre fonction enveloppée périodiquement, et le rebond ne le fera pas. Debounce juste (essaie) d'appeler votre fonction une fois à la toute fin.

Exemple : si vous faites défiler, l'accélérateur appellera lentement votre fonction pendant que vous faites défiler (toutes les X millisecondes). Debounce attendra après que vous ayez fini de faire défiler pour appeler votre fonction.

En termes simples:

La fonction anti - rebond empêchera une fonction de s'exécuter alors qu'elle est encore appelée fréquemment. Une fonction anti-rebond ne s'exécutera qu'après avoir déterminé qu'elle n'est plus appelée, auquel cas elle ne s'exécutera qu'une seule fois. Exemples pratiques de rebond:

• Enregistrement automatique ou validation du contenu d'un champ de texte si l'utilisateur "a arrêté de taper": l'opération ne sera effectuée qu'une seule fois, APRÈS qu'il a été déterminé que l'utilisateur ne tape plus (n'appuyant plus sur les touches).

• Enregistrement où les utilisateurs reposent leur souris: l'utilisateur ne déplace plus sa souris, donc la (dernière) position peut être enregistrée.

La limitation empêchera simplement une fonction de s'exécuter si elle s'est exécutée récemment, quelle que soit la fréquence des appels. Exemples pratiques de limitation:

• Les implémentations de v-sync sont basées sur la limitation: l'écran ne sera dessiné que si 16 ms se sont écoulées depuis le dernier dessin d'écran. Quel que soit le nombre de fois où la fonctionnalité de rafraîchissement d'écran est appelée, elle ne s'exécutera au maximum qu'une fois toutes les 16 ms.

Une analogie réelle qui m'aide personnellement à me souvenir:

• debounce = une conversation . vous attendez que l'autre personne ait fini de parler avant de répondre.
• accélérateur = un peu de tambour . vous jouez uniquement des notes sur un simple bit de batterie 4/4.

Cas d'utilisation pour anti - rebond :

• Dactylographie. Vous voulez faire quelque chose après que l'utilisateur a arrêté de taper. Il est donc logique d'attendre 1 seconde après la dernière frappe. Chaque frappe relance l'attente.
• Animation. Vous souhaitez réduire un élément après que l'utilisateur a arrêté de le survoler. La non-utilisation de l'anti-rebond peut provoquer une animation erratique à la suite du déplacement involontaire du curseur entre les zones "chaude" et "froide".

Cas d'utilisation pour l' accélérateur :

• Défilement. Vous voulez réagir au défilement mais limiter la quantité de calculs effectués, donc faire quelque chose toutes les 100 ms suffit pour éviter un décalage potentiel.
• Déplacement de la souris. Identique au défilement mais au déplacement de la souris.
• Appels API Vous souhaitez déclencher un appel API sur certains événements d'interface utilisateur, mais vous souhaitez limiter le nombre d'appels API que vous effectuez pour ne pas surcharger votre serveur.

throtle est juste un wrapper autour de debounce qui fait passer le rebounce à l'appel functiondans un certain laps de temps, si le rebounce retarde un appel de fonction sur une période de temps plus longue que celle spécifiée dans throtle .

la bibliothèque lodash suggère l'article suivant https://css-tricks.com/debouncing-throttling-explained-examples/ qui explique en détail la différence entre Debounceet Throttleet leur origine

Étranglement

La limitation impose un nombre maximal de fois qu'une fonction peut être appelée heures supplémentaires. Comme dans «exécuter cette fonction au plus une fois toutes les 100 millisecondes». Supposons que dans des circonstances normales, vous appeliez cette fonction 1 000 fois en 10 secondes. Si vous le réduisez à une seule fois par 100 millisecondes, il n'exécutera cette fonction qu'au maximum 100 fois

(10s * 1,000) = 10,000ms
10,000ms / 100ms throttling = 100 maximum calls

Anti-rebond

Le rebouncing impose qu'une fonction ne soit pas appelée à nouveau jusqu'à ce qu'un certain laps de temps se soit écoulé sans qu'elle soit appelée. Comme dans "n'exécuter cette fonction que si 100 millisecondes se sont écoulées sans qu'elle soit appelée".

Peut-être qu'une fonction est appelée 1 000 fois en une rafale rapide, dispersée sur 3 secondes, puis cesse d'être appelée. Si vous l'avez rebondi à 100 millisecondes, la fonction ne se déclenchera qu'une seule fois, à 3,1 secondes, une fois la rafale terminée. Chaque fois que la fonction est appelée pendant la rafale, elle réinitialise le temporisateur anti-rebond

source: - accélération et anti-rebond

Supposons que nous ayons une fonction de rappel "cb" à appeler sur l'événement "E". Laissez "E" se déclencher 1000 fois en 1 seconde, donc il y aurait 1000 appels à "cb". C'est 1 appel / ms. Pour optimiser, nous pouvons utiliser:

• Limitation : Avec une limitation de (100 ms), "cb" serait appelé [100ème ms, 200ème ms, 300ème ms, ... 1000ème ms]. Soit 1 appel / 100 ms. Voici 1000 appels vers "cb" optimisés pour 10 appels.
• Anti - rebond : avec un anti-rebond de (100 ms), "cb" ne serait appelé qu'une seule fois le [1100ème sec]. C'est 100 ms après le dernier déclenchement de "E" qui s'est produit sur [1000e ms]. Voici 1000 appels vers "cb" optimisés pour 1 appel.

Pour autant que je comprends, en termes simples Throttling - similaire à l'appel de setInterval (rappel) pour un certain nombre de fois, c'est-à-dire l'appel de la même fonction pendant un certain nombre de fois dans le temps lors de la survenue d'un événement et .. Debouncing - similaire à l'appel de setTImeout (callbackForApi) ou appeler une fonction après un certain temps s'est écoulé lors de l'occurrence de l'événement. Ce lien peut être utile - https://css-tricks.com/the-difference-between-throttling-and-debouncing/