Drosselung der Nutzung von JS-Funktionen

Dieses Mal werde ich Ihnen die Verwendung der JS-Funktionsdrosselung vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung der JS-Funktionsdrosselung? Hier sind praktische Fälle.

Funktionsdrosselung (Throttle)

Funktionsdrosselung besteht darin, die Ausführung einer Funktion nur dann zu planen, wenn sie größer oder gleich dem Ausführungszyklus ist und Aufrufe innerhalb des Zyklus nicht ausgeführt werden. Es ist, als würde ein Wassertropfen fallen, nachdem er ein bestimmtes Gewicht erreicht hat.

Szenario:

Fenstergröße ändern (Resize)

Seitenscrollen (Scrollen)

Eile und verrücktes Klicken (Mousedown)

Implementierung :

function throttle(method, delay){    var last = 0;    return function (){        var now = +new Date();        if(now - last > delay){
            method.apply(this,arguments);
            last = now;
        }
    }
}document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);

Unterstrich-Implementierung:

_.throttle = function(func, wait, options) {    var context, args, result;    var timeout = null;    var previous = 0;    if (!options) options = {};    var later = function() {
        previous = options.leading === false ? 0 : _.now();
        timeout = null;
        result = func.apply(context, args);        if (!timeout) context = args = null;
    };    return function() {        var now = _.now();        if (!previous && options.leading === false) previous = now;        //计算剩余时间
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;        //剩余时间小于等于0或者剩余时间大于等待时间(本地时间变动出现)
        if (remaining <= 0 || remaining > wait) {            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }        return result;
    };
};

Funktions-Entprellung (Entprellung)

Funktions-Entprellung bedeutet, dass es nur genug gibt, wenn eine Funktion häufig Situationen auslösen muss Freizeit, nur einmal ausgeführt. Es scheint, als würde der Busfahrer darauf warten, dass alle einsteigen, bevor er den Bus verlässt.

Szenario:

Echtzeit Suche (Tastenbetätigung)

Ziehen (Mausbewegung)

Implementierung:

function debounce(method, delay){    var timer = null;    return function(){        var context = this,args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            method.apply(context, args);
        },delay);
    }
}document.getElementById('debounce').onclick = debounce(function(){console.log('click')},2000);

Unterstreichungsimplementierung:

_.debounce = function(func, wait, immediate) {    var timeout, args, context, timestamp, result;    var later = function() {        var last = _.now() - timestamp;        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;            if (!immediate) {
                result = func.apply(context, args);                if (!timeout) context = args = null;
            }
        }
    };    return function() {
        context = this;
        args = arguments;
        timestamp = _.now();        var callNow = immediate && !timeout;        if (!timeout) timeout = setTimeout(later, wait);        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }        return result;
    };
};

Funktionsdrosselung (Throttle) und Funktionsentprellung (Debounce) sind Methoden zur Leistungsverbesserung durch verzögerte logische Operationen, die in Front-End-Optimierungslösungen üblich und wichtig sind. Sie können den Unterschied zwischen den beiden anhand von Konzepten und praktischen Anwendungen verstehen und bei Bedarf die geeignete Methode auswählen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website Andere verwandte Artikel!

Empfohlene Lektüre:

Verwenden von JS-Code zum Erstellen von Sperreffekten

Verwenden von H5-Canvas zum Erstellen von Sperreffekten

Das obige ist der detaillierte Inhalt vonDrosselung der Nutzung von JS-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!