Explication détaillée des exemples de limitation de fonction JS et d'anti-secousse

Cet article présente principalement la limitation des fonctions et l'anti-secousse JS. J'espère que cela pourra aider tout le monde.

Dans le développement front-end, certains comportements des utilisateurs déclencheront fréquemment l'exécution d'événements, et les traitements gourmands en performances tels que les opérations DOM et le chargement des ressources peuvent provoquer des blocages de l'interface ou même des plantages du navigateur. La limitation des fonctions (accélérateur) et la fonction anti-rebond (anti-rebond) ont vu le jour pour résoudre des besoins similaires.

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

• Défilement

• Clics d'achat fous (mousedown)

Réalisation :

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

souligner la mise en œuvre :

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

Anti-rebond de fonction (anti-rebond)

L'anti-rebond de fonction se produit lorsque la fonction doit se déclencher fréquemment, seulement suffisamment de temps d'inactivité, exécutée 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 :

• Recherche en temps réel (keyup)

• Glisser-déposer (mousemove)

Implémentation :

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

Limitation des fonctions (throttle ) et la fonction anti-rebond (debounce) sont deux méthodes pour améliorer les performances grâce à des opérations logiques retardées, et sont des solutions courantes et importantes dans l'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.

Recommandations associées :

Explication détaillée de la limitation et de l'anti-secousse des fonctions javascript

Analyse détaillée de l'anti-rebond et de la limitation des fonctions JS Connaissances Stream_Basic

La signification de la limitation des fonctions et de l'anti-shake

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!