Cet article décrit le concept et l'utilisation de la fonction de fonction de la fonction JavaScript. Partagez-le pour votre référence, comme suit:
Récemment, lorsque je faisais des pages Web, j'avais une exigence, qui devait modifier certaines tailles d'éléments de page lorsque la fenêtre du navigateur a changé, alors j'ai naturellement pensé à l'événement de redimensionnement de la fenêtre, alors j'ai écrit ceci
<! Doctype html> <html> <éad- head> <itle> throttle </ title> </ head> <body> <script type = "text / javascript"> n = 0; function redimensehandler () {console.log (new Date (). getTime ()); console.log (++ n); } window.onresize = redimensihandler; </cript> </ body> </html>La fonction est implémentée, mais lorsque je glisse et dépose la façon dont je change la taille de la fenêtre du navigateur, j'ai regardé la console
C'est vrai, un simple glisser-déposer a fait que ma méthode redimensihandler () exécute 52 fois, ce qui n'est pas du tout l'effet que je veux. En fait, le code de ma méthode redimensihandler () est très compliqué, et j'utilise même Ajax pour envoyer des demandes au serveur. Si je change simplement la taille de la fenêtre à la fois, je dois appeler 52 fois. C'est un gros problème.
Fonctionnement de la fonction
En fait, mon intention d'origine est de faire quelques ajustements à la page une fois la fenêtre redimensionnée. L'événement de redimensionnement de la fenêtre n'est pas déclenché après la fin du redimensionnement. Je ne connais pas la fréquence spécifique, mais elle appelle constamment jusqu'à ce que la taille de la fenêtre ne change pas. En fait, des mécanismes similaires et des mousmes sont déclenchés à plusieurs reprises dans un court laps de temps.
Il existe des fonctions qui gèrent spécifiquement ce problème dans la programmation avancée JavaScript
Fonction Throttle (méthode, contexte) {ClearTimeout (méthode.tid); Method.tid = setTimeout (function () {Method.Call (context);}, 500);}Le principe est très simple. Utilisez une minuterie pour retarder l'exécution de la fonction de 500 millisecondes. Si une fonction est à nouveau appelée dans les 500 millisecondes, le dernier appel sera supprimé. Cette fois, l'appel sera exécuté après 500 millisecondes, et cela sera répété. De cette façon, mon code peut être changé en
<script type = "text / javascript"> n = 0; fonction redimensihandler () {console.log (new Date (). getTime ()); Console.log (++ n);} Fonction Throttle (Method, Context) {ClearTimeout (Method.tid); Method.tid = setTimeout (function () {Method.Call (context);}, 500);} window.onresize = function () {throttle (redimensihandler, window);}; </ script>Essayez de faire glisser et de faire glisser, il n'a été exécuté qu'une seule fois
Une autre façon de le faire
Il existe également une solution de limitation de fonctionnalité en ligne, ce qui fait cela
Fonction Throttle (méthode, retard) {var timer = null; return function () {var context = this, args = arguments; ClearTimeout (temporisateur); timer = setTimeout (function () {méthode.Apply (context, args);}, delay); }}Essayez de l'appeler, le même effet
<script type = "text / javascript"> n = 0; fonction redimensihandler () {console.log (new Date (). getTime ()); Console.log (++ n);} Fonction Throttle (Method, Delay) {var timer = null; return function () {var context = this, args = arguments; ClearTimeout (temporisateur); timer = setTimeout (function () {méthode.Apply (context, args);}, delay); }} window.onresize = throttle (redimensihandler, 500); // Parce que la poignée de fonction est renvoyée, il n'est pas nécessaire d'envelopper la fonction </cript>Comparer
Les deux méthodes utilisent SetTimeout. La différence est que la fonction ajoutée par la deuxième méthode retarde le temps d'exécution. Il est facile d'avoir cette fonction dans la première solution, ajoutant un paramètre.
Mais la première option définit TID comme une variable de la fonction à enregistrer, tandis que la deuxième option crée une fermeture à stocker. Je pense personnellement que l'écart n'est pas grand, et j'aime le premier, ce qui est simple et efficace.
Nouvelle demande
Un jour, j'ai fait quelque chose de similaire, tout comme l'invite automatique pour contribuer sur la page d'accueil de Baidu. J'ai lié l'événement Keyup sur le texte. Il invite automatiquement à chaque fois que le clavier apparaît, mais je ne veux pas inviter si souvent. J'ai donc utilisé la méthode ci-dessus, mais c'était tragique. Je n'ai arrêté l'entrée et j'ai attendu que 500 millisecondes pour provoquer, et il n'y avait aucune invite du tout pendant le processus d'entrée. J'ai regardé le code et j'ai découvert que ce n'était pas vrai. Tant que l'utilisateur taperait aveuglément, appuyez sur le clavier à moins de 500 millisecondes, la fonction rapide serait en continu. Cela ne provoquerait que lorsque je me suis arrêté, ce qui serait dénué de sens.
Peut-il être exécuté une fois à un temps fixe en fonction de la limitation de la fonction?
Petits changements
J'ai recherché en ligne et nous pouvons apporter des modifications en fonction de la deuxième méthode d'écriture (la première est un peu mauvaise pour étendre plusieurs variables pour les fonctions), et ajouter un paramètre car l'intervalle fixe doit être exécuté.
Fonction Accroc (méthode, retard, durée) {var timer = null, begin = new Date (); return function () {var context = this, args = arguments, current = new Date () ;; ClearTimeout (temporisateur); if (current-begin> = durée) {méthode.Apply (contexte, args); Begin = courant; } else {timer = setTimeout (function () {méthode.Apply (context, args);}, delay); }}}De cette façon, nous déterminerons la durée de l'intervalle. Si l'heure de réglage est dépassée, nous l'exécuterons immédiatement. Utilisez l'exemple tout à l'heure pour essayer l'effet
window.onresize = throttle (redimensihandler, 100,200);
Il est vrai qu'il n'y a pas d'exécution fréquente ou d'exécution finale
Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de recherche JavaScript", "Résumé des erreurs Javascript et des techniques de débogage" Algorithmes et techniques de traversée JavaScript ", et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.