Introduction aux scénarios d'application de limitation et d'anti-shake des fonctions Javascript

Cet article vous apporte une introduction à l'utilisation de la portée des variables PHP (code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

throttle Throttle

Exécuté une seule fois après le déclenchement de l'événement.

Scénario d'application

Lorsque l'événement mousemove est déclenché, comme un mouvement de la souris.

Situations qui déclenchent l'événement keyup, telles que la recherche.

Lorsque l'événement de défilement est déclenché, par exemple, le chargement des données est déclenché lorsque la souris arrête de défiler vers le bas.

codage

Méthode 1 Anti-Shake

// function resizehandler(fn, delay){
//   clearTimeout(fn.timer);
//   fn.timer = setTimeout(() => {
//      fn();
//   }, delay);
// }
// window.onresize = () => resizehandler(fn, 1000);

Méthode 2 Fermeture Anti-Shake

function resizehandler(fn, delay){
    let timer = null;
    return function() {
      const context = this;
      const args=arguments;
      clearTimeout(timer);
      timer = setTimeout(() => {
         fn.apply(context,args);
      }, delay);
    }
 }
 window.onresize = resizehandler(fn, 1000);

l'anti-shake anti-rebond

est exécuté une fois au cours d'un certain événement après le déclenchement de l'événement.

Scénario d'application

L'événement de redimensionnement déclenché par le changement de fenêtre n'est exécuté qu'une seule fois.

Pour vérifier la saisie du numéro de téléphone, arrêtez simplement de le saisir une fois.

codage

function resizehandler(fn, delay, duration) {
        let timer = null;
        let beginTime = +new Date();
        return function() {
          const context = this;
          const args = arguments;
          const currentTime = +new Date();
          timer && clearTimeout(timer);
          if ((currentTime - beginTime) >= duration) {
            fn.call(context, args);
            beginTime = currentTime;
           } else {
             timer = setTimeout(() => {
               fn.call(context, args)
             }, delay);
           }
        }
      }

        window.onresize = resizehandler(fn, 1000, 1000);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!