Utilisation de la limitation de la fonction JS

Cette fois, je vais vous présenter l'utilisation de la limitation des fonctions JS. Quelles sont les précautions lors de l'utilisation de la limitation des fonctions JS. Voici des cas pratiques, jetons un coup d'œil.

Limitation de fonction (throttle)

La limitation de fonction consiste à planifier l'exécution d'une fonction uniquement lorsqu'elle est supérieure ou égale au cycle d'exécution, et les appels dans le cycle ne seront pas exécutés. C'est comme si une goutte d'eau tombait après avoir accumulé un certain poids.

Scénario :

Redimensionnement de la fenêtre (redimensionnement)

Défilement de la page (défilement)

Clics précipités et fous (mousedown)

Implémentation :

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);

implémentation du soulignement :

_.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;
    };
};

Fonction anti-rebond (anti-rebond)

La fonction anti-rebond signifie que lorsque la fonction doit se déclencher fréquemment, il n'y a que suffisamment de libre time , exécuté une seule fois. Il semble que le chauffeur du bus attende que tout le monde monte dans le bus avant de sortir du bus.

Scénario :

Temps réel Recherche (touche)

Glisser (déplacement de la souris)

Mise en œuvre :

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);

Implémentation du soulignement :

_.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;
    };
};

La limitation des fonctions (accélérateur) et l'anti-rebond des fonctions (anti-rebond) sont des méthodes permettant d'améliorer les performances grâce à des opérations logiques retardées, qui sont courantes et importantes dans les solutions d'optimisation frontale. Vous pouvez comprendre la différence entre les deux à partir de concepts et d'applications pratiques, et choisir la méthode appropriée si nécessaire.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention au site Web chinois php Autres articles liés !

Lecture recommandée :

Utiliser le code JS pour créer des effets de barrage

Utiliser le canevas H5 pour créer des effets de barrage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!