Implémentation simple en JS de l'anti-shake - anti-rebond et limitation - throttle

1. Qu'est-ce que l'anti-shake et la limitation ?

Ps : Par exemple, dans le champ de recherche, l'utilisateur utilise l'événement change pour appeler la recherche lors de la saisie. Si l'utilisateur saisit à chaque fois Si vous effectuez une recherche, quelle quantité de ressources du serveur sera consommée Même si les ressources de votre serveur sont très puissantes, vous ne jouerez pas comme ça ?

1. Anti-shake - anti-rebond

L'une des solutions consiste à rechercher 500ms chaque fois que l'utilisateur arrête de taper et que le délai dépasse String.

• Principe : Combiner plusieurs appels de fonction en un seul, et n'être appelé qu'une seule fois après un temps donné.

• Implémentation du code :

function debounce(fn, delay) {
  // 维护一个 timer，用来记录当前执行函数状态
  let timer = null;

  return function() {
    // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
    let context = this;
    let args = arguments;
    // 清理掉正在执行的函数，并重新执行
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}
let flag = 0; // 记录当前函数调用次数
// 当用户滚动时被调用的函数
function foo() {
  flag++;
  console.log('Number of calls: %d', flag);
}

// 在 debounce 中包装我们的函数，过 2 秒触发一次
document.body.addEventListener('scroll', debounce(foo, 2000));

1. debounceUne fois la fonction encapsulée, renvoyez le fonction interne

2. Chaque fois que l'événement est déclenché, le timer actuel sera effacé et le délai d'attente sera réinitialisé et appelé. Cela entraînera l'annulation par chaque événement haute fréquence de l'appel de délai d'attente précédent, empêchant ainsi le déclenchement du gestionnaire d'événements

3. Uniquement lorsque l'événement haute fréquence s'arrête, l'appel de délai d'attente déclenché par le le dernier événement peut être exécuté delay

après

temps 2. Accélérateur - accélérateur

Une autre solution plus lâche que anti-shake Pour le moment, nous ne voulons pas que l'utilisateur saisisse aveuglément, mais lui donnons des invites de recherche, nous limitons donc la requête au 500ms à ce moment-là à chaque fois que String passe. Il s'agit d'une limitation.

• Principe : quelle que soit la fréquence de déclenchement de l'événement, la fonction de limitation garantira que la fonction de traitement de l'événement réel sera exécutée une fois dans le délai spécifié.

• Il existe deux implémentations de code, l'une est l'horodatage et l'autre est la minuterie
  1) Implémentation de l'horodatage :

function throttle(func, delay){
  let prev = Date.now();
  return function(){
    const context = this;
    const args    = arguments;
    const now     = Date.now();
    if(now - prev >= delay){
      func.apply(context, args);
      prev = Date.now();
    }
  }
}

Quand un événement à haute fréquence est déclenché, il doit être exécuté immédiatement pour la première fois (si l'intervalle entre la fonction de liaison d'événement et l'événement déclencheur réel est supérieur à delay), quelle que soit la fréquence de déclenchement de l'événement, il sera exécuté tous les delayExécuté une seule fois par seconde. Lorsque le dernier événement est déclenché, l'événement ne sera plus exécuté.

2) Implémentation du minuteur :
Lorsqu'un événement est déclenché, nous définissons un minuteur. Lorsque l'événement est à nouveau déclenché, si le minuteur existe, il ne sera exécuté que lorsque < ; 🎜> secondes plus tard, le processeur exécute la fonction d'exécution et efface la minuterie afin que la minuterie suivante puisse être réglée. delay

fucntion throttle(func, delay){
  let timer = null;

  return funtion(){
    let context = this;
    let args    = arguments;
    if(!timer){
      timer = setTimeout(function(){
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}

Lorsque l'événement est déclenché pour la première fois, la fonction ne sera certainement pas exécutée immédiatement, mais sera exécutée après

secondes. Après delay, les événements sont déclenchés en continu et seront exécutés toutes les
secondes. delayAprès le déclenchement du dernier arrêt, la fonction peut être exécutée une fois en raison du
retard de la minuterie. delay

3) Utilisation combinée d'horodatages et de minuteries pour exécuter un événement immédiatement lorsqu'il est déclenché. La fonction de limitation

function throttle(func, delay){
  let timer = null;
  let startTime = Date.now();

  return function(){
    let curTime = Date.now();
    let remaining = delay - (curTime - startTime);
    const context = this;
    const args = arguments;

    clearTimeout(timer);
    if(remaining <= 0){
      func.apply(context,args);
      startTime = Date.now();
    }else{
      timer = setTimeout(func, remaining);
    }
  }
}

doit être exécutée dans chaque

La fonction le sera certainement. exécuté une fois dans le temps, donc l'heure de début, l'heure actuelle et delay sont utilisés dans la fonction de limitation pour calculer delay Quand remaining cela signifie qu'il est temps d'exécuter la fonction. Si l'heure n'est pas encore arrivée, réglez-le à nouveau après remaining <= 0 temps. Bien entendu, si un autre événement survient pendant la période remaining, le timer actuel sera annulé et un remaining sera recalculé pour déterminer l'état actuel. remaining

Articles connexes :

Explication détaillée de la limitation et du rebond anti-secousse de la fonction javascript

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

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!