Une brève analyse de l'accélérateur et du anti-rebond dans les connaissances javascript_Basic

accélérateur

La limitation dont nous parlons ici signifie la limitation des fonctions. Pour le dire plus simplement, le contrôleur de fréquence des appels de fonction est le contrôle d'intervalle de temps d'exécution continu. Les principaux scénarios d'application incluent :

1. Mouvement de la souris, événement mousemove
2. Positionnement dynamique des éléments DOM, événements de redimensionnement et de défilement de l'objet fenêtre

Quelqu'un a comparé de manière frappante l'incident ci-dessus au tir d'une mitrailleuse. L'accélérateur est la gâchette de la mitrailleuse. Si vous ne relâchez pas la gâchette, elle continuera à tirer. Il en va de même pour les événements ci-dessus que nous utilisons pendant le développement. Si vous ne relâchez pas la souris, ses événements continueront à se déclencher. Par exemple :

Copier le code Le code est le suivant :

var resizeTimer=null;
$( window).on('resize',function(){
if(resizeTimer){
clearTimeout(resizeTimer)
}
resizeTimer=setTimeout(function(){
console.log( "redimensionnement de la fenêtre");
},400);

anti-rebond

Debounce est très similaire à throttle. Debounce signifie que la méthode appelante ne sera exécutée que lorsque le temps d'inactivité doit être supérieur ou égal à une certaine valeur. l'anti-rebond est le contrôle d'intervalle du temps d'inactivité. Par exemple, lorsque nous effectuons la saisie semi-automatique, nous devons avoir un bon contrôle sur l'intervalle de temps entre les méthodes d'appel lors de la saisie de texte. Généralement, le premier caractère saisi est appelé immédiatement et la méthode d'exécution est appelée à plusieurs reprises selon un certain intervalle de temps. C'est particulièrement utile pour les entrées anormales, comme appuyer et maintenir un certain bâtiment.

Les principaux scénarios d'application de l'anti-rebond sont :
Événement keydown de saisie de texte, événement keyup, tel que la saisie semi-automatique

Il existe de nombreuses méthodes en ligne de ce type. Par exemple, Underscore.js encapsule l'accélération et l'anti-rebond. jQuery dispose également d'un plug-in d'accélération et d'anti-rebond : jQuery throttle / anti-bounce Tous les principes sont les mêmes et les mêmes fonctions sont implémentées. Voici une autre fonction de contrôle des gaz et anti-rebond que j'utilise :

Copiez le code Le code est le suivant :

/*
* Lorsque la fonction de retour du contrôle de fréquence est appelée en continu, la fréquence d'exécution de fn est limitée à l'exécution à chaque fois
* @param fn {function} La fonction qui doit être appelée
* @param delay {number} Temps de retard, unité milliseconde
* @param immédiat {bool} Passez false au paramètre immédiat La fonction liée sera exécutée en premier, pas après le délai.
* @return {function}appelle réellement la fonction
*/
var throttle = function (fn, delay, immédiate, antibounce) {
var curr = new Date(),//événement en cours
last_call = 0,
last_exec = 0,
timer = null,
diff, //différence horaire
contexte,//context
args,
exec = function ( ) {
last_exec = curr;
fn.apply(context, args);
};
return function () {
curr= new Date();
context = this ,
args = arguments,
diff = curr - (debounce ? last_call : last_exec) - delay;
clearTimeout(timer);
if (anti-rebond) {
if (immédiat) {
timer = setTimeout(exec, delay);
                                                                                                                         >= 0 ) {
                                                     exec();                                                                             🎜> last_call = curr;
}
};

/*
* Lorsque la fonction de retour du contrôle de ralenti est appelée en continu, le temps d'inactivité doit être supérieur ou égal au délai, et fn sera exécuté
* @param fn {fonction} À appeler Fonction
* @ param delay {number} Temps d'inactivité
* @param immédiat {bool} Passez false au paramètre immédiat La fonction liée sera exécutée en premier, pas après un délai.
* @return {function}La fonction réelle appelée
*/

var debounce = function (fn, delay, immédiate) {
return throttle(fn, delay, immédiate, true) ;