étrangler
L'accélération dont nous parlons ici signifie la limitation de la fonction. Pour le dire simplement, le contrôleur de fréquence des appels de fonction consiste à effectuer en continu le contrôle d'intervalle de temps. Scénarios d'application principaux tels que:
1. Événement de déménagement de la souris
2. Positionnement dynamique des éléments DOM, redimensionnement et défilement des objets de fenêtre
Certaines personnes comparent de manière vivante l'incident mentionné ci-dessus au mitraillage d'une mitrailleuse. L'accélérateur est la gâchette de la mitrailleuse. Si vous ne mettez pas la gâchette, il continuera de tirer. Il en va de même pour les événements ci-dessus que nous avons utilisés pendant le développement. Si vous ne libérez pas la souris, ses événements seront toujours déclenchés. Par exemple:
La copie de code est la suivante:
var resizetimer = null;
$ (fenêtre) .on ('redimensi', function () {
if (resizetimer) {
ClearTimeout (Resizetimer)
}
resizetimer = setTimeout (function () {
Console.log ("Window Resize");
}, 400);
Déboucher
Débounce est très similaire à l'accélérateur. Débounce est une méthode qui sera exécutée lorsque le temps libre doit être supérieur ou égal à une certaine valeur. Débounce est le contrôle d'intervalle du temps libre. Par exemple, lorsque nous faisons une assortie automatique, nous devons contrôler l'intervalle de temps de l'appel de la méthode lors de la saisie du texte. Généralement, le premier caractère d'entrée commence à appeler immédiatement et la méthode exécutée est appelée à plusieurs reprises en fonction d'un certain intervalle de temps. Il est particulièrement utile pour les intrants anormaux, comme la maintenance d'un certain et ne le mettant pas.
Les principaux scénarios d'application de débouchement sont:
Événement Keydown d'entrée de texte, événement Keyup, par exemple, Assublication automatique
Il existe de nombreuses méthodes pour ce type de ligne, telles que souligner.js résume de l'accélérateur et du débonancement. JQuery propose également un plug-in pour l'accélérateur et le débouchement: jQuery Throttle / Debounce. Tous les principes sont les mêmes et les mêmes fonctions sont implémentées. Voici une autre fonction de contrôle de l'accélérateur et de débouchement que j'utilise à nouveau:
La copie de code est la suivante:
/ *
* Lorsque la fonction de retour de contrôle de fréquence est appelée continuellement, la fréquence d'exécution FN est limitée au nombre de fois où il est exécuté à chaque fois
* @param fn {fonction} fonctions qui doivent être appelées
* @param retard {nombre} temps de retard en millisecondes
* @param immédiat {bool} passer false au paramètre immédiat La fonction liée est exécutée d'abord, plutôt que retardée puis exécutée.
* @return {function} appelle réellement la fonction
* /
var throttle = fonction (fn, retard, immédiat, débouchant) {
var curr = + nouveau date (), // événement actuel
last_call = 0,
last_exec = 0,
minuterie = null,
Diff, // Création horaire
contexte, // contexte
args,
exec = function () {
last_exec = curr;
fn.Apply (contexte, args);
};
return function () {
curr = + new Date ();
contexte = ceci,
args = arguments,
Diff = curr - (Debounce? Last_Call: Last_Exec) - Delay;
ClearTimeout (temporisateur);
if (déboucher) {
if (immédiat) {
timer = setTimeout (exec, retard);
} else if (diff> = 0) {
exec ();
}
} autre {
if (diff> = 0) {
exec ();
} else if (immédiat) {
timer = setTimeout (exec, -diff);
}
}
last_call = curr;
}
};
/ *
* Lorsque la fonction de retour de contrôle inactif est appelée continu, le temps inactif doit être supérieur ou égal au retard avant que FN ne soit exécuté.
* @param fn {fonction} La fonction à appeler
* @param retard {numéro} temps libre
* @param immédiat {bool} passer false au paramètre immédiat La fonction liée est exécutée d'abord, plutôt que retardée puis exécutée.
* @return {function} appelle réellement la fonction
* /
var Debounce = fonction (fn, retard, immédiat) {
retour de la papillon (fn, retard, immédiat, vrai);