Ausführliche Erläuterung der JavaScript-Drosselungsfunktion Throttle

In den Browser-DOM-Ereignissen gibt es einige Ereignisse, die zusammen mit den Vorgängen des Benutzers kontinuierlich ausgelöst werden. Zum Beispiel: Ändern Sie die Größe des Browserfensters (resize), scrollen Sie durch die Browserseite (scroll) und bewegen Sie die Maus (mousemove). Das heißt, wenn der Benutzer diese Browservorgänge auslöst und die entsprechende Ereignisverarbeitungsmethode an das Skript gebunden ist, wird diese Methode kontinuierlich ausgelöst.

Das ist nicht das, was wir wollen, denn manchmal, wenn die Ereignisverarbeitungsmethode relativ groß ist, der DOM-Vorgang kompliziert ist und solche Ereignisse kontinuierlich ausgelöst werden, führt dies zu Leistungseinbußen und verringert die Benutzererfahrung (UI-Reaktion). ist langsam, der Browser friert ein usw.). Im Allgemeinen fügen wir dem entsprechenden Ereignis eine verzögerte Ausführungslogik hinzu.

Normalerweise verwenden wir den folgenden Code, um diese Funktion zu implementieren:

var COUNT = 0;
function testFn() { console.log(COUNT++); }
// 浏览器resize的时候
// 1. 清除之前的计时器
// 2. 添加一个计时器让真正的函数testFn延后100毫秒触发
window.onresize = function () {
    var timer = null;
    clearTimeout(timer);

    timer = setTimeout(function() {
        testFn();
    }, 100);
};

Aufmerksame Schüler werden feststellen, dass der obige Code tatsächlich falsch ist. Dies ist ein Problem, das Anfänger machen werden: Der Rückgabewert der setTimeout-Funktion sollte in einer relativen globalen Variablen gespeichert werden, da sonst bei jeder Größenänderung ein neuer Timer generiert wird, der nicht den von uns gesendeten Effekt erzielt

Also haben wir den Code geändert:

var timer = null;
window.onresize = function () {
    clearTimeout(timer);
    timer = setTimeout(function() {
        testFn();
    }, 100);
};

Zu diesem Zeitpunkt ist der Code normal, aber es gibt ein neues Problem: Es wird ein globaler Variablen-Timer generiert. Das möchten wir nicht sehen. Wenn diese Seite andere Funktionen hat, die auch als Timer bezeichnet werden, kommt es vorher zu Konflikten mit anderen Codes. Um dieses Problem zu lösen, müssen wir eine Sprachfunktion von JavaScript verwenden: Closure Closures. Leser mit entsprechenden Kenntnissen können sich an MDN wenden, um mehr darüber zu erfahren. Der geänderte Code lautet wie folgt:

/**
 * 函数节流方法
 * @param Function fn 延时调用函数
 * @param Number delay 延迟多长时间
 * @return Function 延迟执行的方法
 */
var throttle = function (fn, delay) {
    var timer = null;

    return function () {
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn();
        }, delay);
    }
};
window.onresize = throttle(testFn, 200, 1000);

Wir verwenden eine Abschlussfunktion (Drosseldrosselung), um den Timer einzubauen und die Verzögerungsverarbeitungsfunktion zurückzugeben. damit der Timer Die Variable ist für die Außenwelt unsichtbar, aber auf die Timer-Variable kann auch zugegriffen werden, wenn die interne Verzögerungsfunktion ausgelöst wird.

Natürlich ist diese Schreibweise für Anfänger schwer zu verstehen. Wir können die Schreibweise ändern, um sie zu verstehen:

var throttle = function (fn, delay) {
    var timer = null;

    return function () {
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn();
        }, delay);
    }
};

var f = throttle(testFn, 200);
window.onresize = function () {
    f();
};

Das Wichtigste hier ist: Throttle ist Die nach dem Aufruf zurückgegebene Funktion ist die eigentliche Funktion, die aufgerufen werden muss, wenn onresize ausgelöst wird

Nun scheint diese Methode nahezu perfekt zu sein, aber das ist in Wirklichkeit nicht der Fall verwenden. Zum Beispiel:

Wenn der Benutzer kontinuierlich die Größe des Browserfensters ändert, wird die Verzögerungsverarbeitungsfunktion nicht einmal ausgeführt

Also wir Andere Es muss eine Funktion hinzugefügt werden: Wenn der Benutzer die Größenänderung auslöst, sollte diese mindestens einmal innerhalb eines bestimmten Zeitraums ausgelöst werden . Da dies innerhalb eines bestimmten Zeitraums geschieht, kann diese Beurteilungsbedingung die aktuelle Zeit annehmen Millisekunden subtrahiert dieser Funktionsaufruf bei jedem Aufruf die aktuelle Zeit von der Zeit des letzten Aufrufs und bestimmt dann, ob die Differenz größer als ein bestimmter Zeitraum ist. Andernfalls wird die Verzögerungslogik von ausgelöst Timeout wird weiterhin verwendet.

Was im folgenden Code hervorgehoben werden muss, ist:

1. Die Rolle der vorherigen Variablen ähnelt der des Timers. Sie zeichnen beide die letzte Identifikation auf und muss eine relative globale Variable sein

2. Wenn der Logikfluss der Logik „mindestens einmal auslösen“ folgt, muss der Funktionsaufruf auf die aktuelle Zeit zurückgesetzt werden, was einfach bedeutet: relativ zur vorherigen Zeit des nächsten Mals Tatsächlich ist dies die aktuelle

/**
 * 函数节流方法
 * @param Function fn 延时调用函数
 * @param Number delay 延迟多长时间
 * @param Number atleast 至少多长时间触发一次
 * @return Function 延迟执行的方法
 */
var throttle = function (fn, delay, atleast) {
    var timer = null;
    var previous = null;

    return function () {
        var now = +new Date();

        if ( !previous ) previous = now;

        if ( now - previous > atleast ) {
            fn();
            // 重置上一次开始时间为本次结束时间
            previous = now;
        } else {
            clearTimeout(timer);
            timer = setTimeout(function() {
                fn();
            }, delay);
        }
    }
};

Praxis:

Wir simulieren ein Szenario der Drosselung, wenn ein Fenster scrollt. Das heißt, wir müssen drosseln, wenn der Benutzer die Seite nach unten scrollt. Der Stream führt einige Methoden aus, z. B. die Berechnung der DOM-Position und andere Aktionen, die eine kontinuierliche Manipulation von DOM-Elementen erfordern.

Der vollständige Code lautet wie folgt :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>throttle</title>
</head>
<body>
    <p style="height:5000px">
        <p id="demo" style="position:fixed;"></p>
    </p>
    <script>
    var COUNT = 0, demo = document.getElementById(&#39;demo&#39;);
    function testFn() {demo.innerHTML += &#39;testFN 被调用了 &#39; + ++COUNT + &#39;次<br>&#39;;}

    var throttle = function (fn, delay, atleast) {
        var timer = null;
        var previous = null;

        return function () {
            var now = +new Date();

            if ( !previous ) previous = now;
            if ( atleast && now - previous > atleast ) {
                fn();
                // 重置上一次开始时间为本次结束时间
                previous = now;
                clearTimeout(timer);
            } else {
                clearTimeout(timer);
                timer = setTimeout(function() {
                    fn();
                    previous = null;
                }, delay);
            }
        }
    };
    window.onscroll = throttle(testFn, 200);
    // window.onscroll = throttle(testFn, 500, 1000);
    </script>
</body>
</html>

Wir verwenden zwei Fälle, um den Effekt zu testen, indem wir jeweils mindestens den atleast-Parameter hinzufügen und nicht hinzufügen:

// case 1
window.onscroll = throttle(testFn, 200);
// case 2
window.onscroll = throttle(testFn, 200, 500);

Fall 1 verhält sich wie folgt Folgendes: testFN wird während des Seitenscrollvorgangs nicht aufgerufen (kann nicht gestoppt werden), bis es einmal gestoppt wird, d Die Abbildung (siehe Original-GIF):

Fall 2

verhält sich wie folgt: Während des Seitenscrollvorgangs (kann nicht gestoppt werden) wird testFN angezeigt Zum ersten Mal mit einer Verzögerung von 500 ms ausgeführt (mindestens von der Verzögerungslogik) und dann mindestens alle 500 ms ausgeführt. Der Effekt ist wie in der Abbildung dargestellt

So Bisher ist der von uns angestrebte Effekt im Wesentlichen erreicht. Der Leser kann einige nachfolgende Hilfsoptimierungen selbst herausfinden, z. B.: Funktion, auf die dies zeigt, Rückgabewertspeicherung usw.

Zitat

Testcode http://jsbin.com/tanuxegija/edit
Vollversionscode http:/ /jsbin.com/jigozuvuko
Debounce VS Throttle https://github.com/dcorb/debounce-throttle

Das Obige ist die detaillierte Erklärung der JavaScript-Drosselungsfunktion Throttle. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!