Was ist Anti-Shake und Throttling in Javascript?

In JavaScript bedeutet Anti-Shake, dass die Funktion nur einmal innerhalb von n Sekunden nach dem Auslösen eines Hochfrequenzereignisses ausgeführt wird. Wenn das Hochfrequenzereignis innerhalb von n Sekunden erneut ausgelöst wird, wird die Zeit neu berechnet Wenn das Ereignis kontinuierlich ausgelöst wird, stellen Sie sicher, dass die Ereignisverarbeitungsfunktion innerhalb eines bestimmten Zeitraums nur einmal aufgerufen wird.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

1. Anti-Shake

Die Funktion wird nur einmal innerhalb von n Sekunden nach Auslösung eines Hochfrequenzereignisses ausgeführt. Wenn das Hochfrequenzereignis innerhalb von n Sekunden erneut ausgelöst wird, wird die Zeit neu berechnet

Idee:
• Aktionsbindendes Ereignis, das Ereignis wird nach einer bestimmten Zeitspanne nach dem Auftreten der Aktion ausgelöst. Wenn die Aktion in diesem Zeitraum erneut auftritt, warten Sie eine bestimmte Zeit, bevor Sie das Ereignis auslösen.
  

function debounce(fn) {
      let timeout = null; // 创建一个标记用来存放定时器的返回值
      return function () {
        clearTimeout(timeout);
         // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { 
        // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内
        // 如果还有字符输入的话，就不会执行 fn 函数
          fn.apply(this, arguments);
          //因为sayHi函数是在全局中运行，this默认指向了window
          //所以要用apply将inp的this传入
        }, 500);
      };
    }
    function sayHi() {
      console.log('防抖成功');
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); // 防抖

Wenn Sie beispielsweise eine Anforderung haben, dass nach der Eingabe einer Zeichenfolge durch den Benutzer automatisch eine Ajax-Anfrage gesendet wird, wird der Benutzer die Zeichenfolge jedes Mal ändern (Zeichen löschen oder neue Zeichen eingeben) sendet eine Anfrage, aber wenn eine Anti-Shake-Verarbeitung durchgeführt wird, hat sich die Zeichenfolge nach der Eingabe eines Zeichens durch den Benutzer nach 0,5 Sekunden nicht geändert (dies bedeutet höchstwahrscheinlich, dass der Benutzer die Zeichenfolgeneingabe abgeschlossen hat). ), dann wird die Anfrage gesendet. Wenn die Zeichenfolge innerhalb von 0,5 Sekunden geändert wird (dies bedeutet höchstwahrscheinlich, dass die aktuelle Zeichenfolge nicht die letzte vom Benutzer eingegebene Zeichenfolge ist), wird die Anfrage vorübergehend nicht gesendet Die Anfrage wird 0,5 Sekunden lang neu berechnet, bis der Benutzer länger als 0,5 Sekunden innehält, bevor er die Anfrage erneut sendet.

2. Drosselung

Stellen Sie sicher, dass die Ereignisverarbeitungsfunktion nur einmal innerhalb eines bestimmten Zeitraums aufgerufen wird. Daher verringert die Drosselung die Ausführungshäufigkeit der Funktion

Idee:
• Aktionsbindungsereignis, das Ereignis wird nach einer bestimmten Zeitspanne nach dem Auftreten der Aktion ausgelöst. Wenn die Aktion in diesem Zeitraum erneut auftritt, wird die Aktion ausgeführt wird ignoriert, bis das Ereignis ausgeführt wird. Erst dann kann es erneut ausgelöst werden.
  

function throttle(fn) {
      let canRun = true; // 通过闭包保存一个标记
      return function () {
        if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
        canRun = false; // 立即设置为false
        setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
          fn.apply(this, arguments);
          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次
          //循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
          canRun = true;
        }, 500);
      };
    }
    function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));

3. Kombiniert mit Anwendungsszenarien

Entprellen (Anti-Shake)

• Suchen Sie Lenovo. Wenn Benutzer weiterhin Werte eingeben, verwenden Sie Anti-Shake, um Anforderungsressourcen zu sparen.

• Wenn das Fenster eine Größenänderung auslöst, wird dieses Ereignis durch die ständige Anpassung der Browserfenstergröße kontinuierlich ausgelöst Auslöser, Mousedown (wird nur einmal pro Zeiteinheit ausgelöst)

Überwachen Sie Scroll-Ereignisse, z. B. ob nach unten geschoben werden soll, um automatisch mehr zu laden, verwenden Sie den Gashebel, um zu beurteilen

[Empfohlenes Lernen:

Javascript-Tutorial für Fortgeschrittene
• ]

Das obige ist der detaillierte Inhalt vonWas ist Anti-Shake und Throttling in Javascript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!