Introduction détaillée à l'anti-rebond et à la limitation en JavaScript (exemple de code)

Le contenu de cet article est une introduction détaillée (exemple de code) sur l'anti-rebond et la limitation en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Qu'il s'agisse d'une interview ou d'une discussion sur l'optimisation du navigateur, les problèmes de rebond et de limitation seront impliqués.
En général, ces deux-là sont un moyen de limiter la fréquence de déclenchement d'événements. La différence est que la limitation spécifie l'intervalle de temps pendant lequel les événements sont déclenchés ; l'anti-rebond spécifie les intervalles de temps pendant lesquels les événements ne sont pas déclenchés. À en juger par les résultats, la limitation réduit la sensibilité du traitement du temps ; tandis que l'anti-rebond stocke d'abord les événements déclencheurs, puis les envoie ensemble une fois l'intervalle d'événements spécifié dépassé.
Ça devient de plus en plus vertigineux, alors allez directement au code :
HTML

<input type="text" oninput="fatch()">

Il y a une balise d'entrée que les utilisateurs peuvent rechercher, et il y a une traitement qui sera déclenché par le patch de fonction d'événement d'entrée, ce patch demandera les mots associés à l'arrière-plan en fonction de la valeur de l'entrée.
Il n'y a aucun problème avec l'idée de code ci-dessus, mais s'il n'y a pas de restrictions de déclenchement, un grand nombre de requêtes http peuvent être générées, et beaucoup de ces requêtes peuvent ne pas avoir beaucoup d'importance, laissant de la place à notre optimisation ci-dessous ; , je vais utiliser Deux idées, la limitation et l'anti-rebond, sont utilisées pour résoudre ce problème. (En général, l'anti-rebond est utilisé pour résoudre le problème de saisie ; ceci est juste pour faciliter l'explication du code)

Limitation

function jieliu (func, time){//func 执行函数， time 时间间隔
  let lastRun = null
  
  return function(){
    const now = new Date()
    if(now - lastRun > time){
      func(...arguments)
      lastRun = now
    }
  }
}


const listener = jieliu(function(value){//监听函数，指定间隔时间
  console.log(value)
}, 1000)

const input = document.querySelector("input")
//调用方法
input.addEventListener("input", function(event){
     listener(event.target.value)
})

Ce qui précède est une implémentation de limitation relativement simple et une méthode d'appel de base ;La fermeture est utilisée pour sauvegarder le lastRun de chaque exécution. L'obligation de limiter la fréquence des demandes est fondamentalement mise en œuvre, mais le déclenchement de cette dernière est ignoré.
Les améliorations sont les suivantes :

function jieliu (func, time){// 触发时间间隔>time 发送请求
  let lastRun = null
  let timeout = undefined
  return function(){
    const self = this; 
    const now = new Date()
    if(now - lastRun > time){
      if(timeout){
        clearTimeout(timeout)
        timeout = undefined
      }
      func.apply(self, arguments)
      lastRun = now
    }
    else{
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
    }
  }
}

Ajouter un délai d'attente pour déterminer s'il s'agit de la dernière requête.

Anti-rebond

function qudou(func, time){
  let timeout = undefined
  
  return function(){
    const argu = arguments
    const self = this

    if(timeout){
      clearTimeout(timeout)
      timeout = undefined
    }else{
        timeout = setTimeout(func.apply(this, arguments), time)
    }
  }
}

Ce qui précède est une simple implémentation de l'anti-rebond. De même, le dernier événement ne peut pas déclencher la fonction de traitement.

Les améliorations sont les suivantes :

function qudou(func, time){//判断连续time时间内不触发，发送func请求
  let timeout = undefined;
  let lastRun = null
  return function(){
    const self = this
    const now = new Date()
    if(now - lastRun > time){
      func.apply(self, arguments)
    }
    else {
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
      else {
        clearTimeout(timeout)
        timeout = undefined
      }
    }
    lastRun = new Date()
  }
}

Résumé

Écrivez l'intégralité de l'article. Le principal moyen d'obtenir une limitation est de comparer ". now" et " "lastRun" différence de temps, réduisant ainsi le nombre d'appels à la fonction de traitement ; l'anti-shake utilise toujours settimeout pour retarder le timing d'appel de la fonction de traitement, puis agrège les résultats de plusieurs déclencheurs et appelle la fonction de traitement. ensemble.

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!