Heim > Web-Frontend > js-Tutorial > Hauptteil

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

不言
Freigeben: 2018-09-28 15:45:26
nach vorne
2019 Leute haben es durchsucht

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);
            }
        };
    }
Nach dem Login kopieren

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);
        };
    }
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage