Einführung in Anwendungsszenarien der Drosselung und des Anti-Shake von Javascript-Funktionen

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung des PHP-Variablenbereichs (Code). Freunde in Not können darauf zurückgreifen.

throttle Throttle

Wird nur einmal ausgeführt, nachdem das Ereignis ausgelöst wurde.

Anwendungsszenario

Wenn das Mousemove-Ereignis ausgelöst wird, z. B. eine Mausbewegung.

Situationen, die das Keyup-Ereignis auslösen, z. B. eine Suche.

Wenn das Scroll-Ereignis beispielsweise ausgelöst wird, wird das Laden von Daten ausgelöst, wenn die Maus aufhört, nach unten zu scrollen.

Codierung

Methode 1 Anti-Shake

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

Methode 2 Schließung 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);

Entprellung Anti-Shake Schütteln

Einmal innerhalb eines bestimmten Ereignisses ausführen, nachdem das Ereignis ausgelöst wurde.

Anwendungsszenario

Das durch Fensterwechsel ausgelöste Größenänderungsereignis wird nur einmal ausgeführt.

Um die eingegebene Telefonnummer zu überprüfen, hören Sie einfach einmal mit der Eingabe auf.

Codierung

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);

Das obige ist der detaillierte Inhalt vonEinführung in Anwendungsszenarien der Drosselung und des Anti-Shake von Javascript-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!