Implementierung von Funktionsdrosselung und Anti-Shake in Javascript (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Implementierung von Funktionsdrosselung und Anti-Shake (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

Funktionsdrosselung (Throttle)

Begriffserklärung

Funktionsdrosselung (Throttle): Kontinuierliche Ausführung von Funktionen, Ausführung von Funktionen in bestimmten Abständen

Szene verwenden

Mausbewegung, Mausbewegungsereignis
Dynamische Positionierung von DOM-Elementen, Größenänderung von Fensterobjekten und Bildlaufereignisse
usw....

Einfache Implementierung der Funktionsdrosselung

    function throttle(fn, delay) {
        var last; // 上次执行的时间
        var timer; // 定时器
        delay || (delay = 250); // 默认间隔为250ms
        return function() {
            var context = this;
            var args = arguments;
            var now = +new Date(); // 现在的时间
            if (last && now < last + delay) { // 当前距离上次执行的时间小于设置的时间间隔
                clearTimeout(timer); // 清除定时器
                timer = setTimeout(function() { // delay时间后，执行函数
                    last = now;
                    fn.apply(context, args);
                }, delay);
            } else { // 当前距离上次执行的时间大于等于设置的时间，直接执行函数
                last = now;
                fn.apply(context, args);
            }
        };
    }

Funktion entprellen (debounce)

Begriffserklärung

Funktion entprellen (debounce): Die aufrufende Methode wird nur ausgeführt, wenn die Leerlaufzeit größer oder gleich einem bestimmten Wert sein muss

Nutzungsszenarien

Texteingabe-Keydown-Ereignis
usw....

Einfache Implementierung der Funktion Debounce

    function debounce(fn, delay) {
        var timer; // 定时器
        delay || (delay = 250); // 默认空闲时间250ms
        return function() {
            var context = this;
            var args = arguments;
            clearTimeout(timer); // 清除定时器
            timer = setTimeout(function() { // delay时间后，执行函数
                fn.apply(context, args);
            }, delay);
        };
    }

Das obige ist der detaillierte Inhalt vonImplementierung von Funktionsdrosselung und Anti-Shake in Javascript (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!