Explication détaillée de la fonction haute performance anti-tremblement et limitation de js-js tutoriel-php.cn

Explication détaillée de la fonction haute performance anti-tremblement et limitation de js

小云云

Libérer： 2018-03-17 15:01:57

original

1825 Les gens l'ont consulté

La limitation des fonctions signifie que la méthode js ne s'exécutera qu'une seule fois pendant une certaine période de temps. Fonction anti-shake : signifie que lorsqu'elle est déclenchée fréquemment, le code ne sera exécuté qu'une seule fois lorsqu'il y a suffisamment de temps libre. Cet article partage principalement avec vous l'explication détaillée de la fonction anti-tremblement et limitation hautes performances de js. J'espère que cela pourra aider tout le monde.

1. Limitation des fonctions (throttle)

1. Le but de la limitation des fonctions
Par exemple, les opérations DOM nécessitent plus de mémoire et de temps CPU que les interactions non-DOM. Tenter d'effectuer successivement trop d'opérations liées au DOM peut entraîner le blocage du navigateur et parfois même un crash. Cela est particulièrement susceptible de se produire lors de l'utilisation du gestionnaire d'événements onresize dans IE. Lorsque le navigateur est redimensionné, l'événement sera déclenché en continu. Si vous essayez d'effectuer des opérations DOM dans le gestionnaire d'événements onresize, sa fréquence élevée de modifications peut faire planter le navigateur. Pour un autre exemple, pour notre fonction de recherche commune, nous lions généralement l'événement keyup et effectuons une recherche à chaque fois que vous appuyez sur le clavier. Mais notre objectif est principalement de rechercher chaque fois que nous saisissons un contenu. Afin de résoudre ces problèmes, vous pouvez utiliser des minuteries pour limiter les fonctions.
2. Principe de limitation des fonctions
Certains codes ne peuvent pas être exécutés de manière continue et répétée sans interruption. La première fois que la fonction est appelée, un minuteur est créé pour exécuter le code après un intervalle spécifié. Lorsque la fonction est appelée une deuxième fois, elle efface la minuterie précédente et en définit une autre. Si le timer précédent a déjà été exécuté, cette opération n'a aucun sens. Cependant, si le timer précédent n’a pas encore été exécuté, il est remplacé par un nouveau timer. Le but est d'exécuter la fonction uniquement après que la demande d'exécution ait été arrêtée pendant un certain temps.

3. Mode de base de limitation des fonctions

var processor = {
   timeoutId: null,
     //实际进行处理的方法
   performProcessing: function(){
     //实际执行的代码
   },
  //初始处理调用的方法
  process: function(){
    clearTimeout(this.timeoutId);
    var that = this;
    this.timeoutId = setTimeout(function(){
      that.performProcessing();
    }, 100);
  }
};
//尝试开始执行
processor.process();

Copier après la connexion

4. Liezi

<!DOCTYPE html>
<html lang="zh-CN">
<head>  
	<meta charset="utf-8">
    <title></title>  
</head>  
<body>  	
	<input id="search" type="text" name="search">
<script>

	function queryData(text){
	  console.log("搜索：" + text);
	}
	var input = document.getElementById("search");
	input.addEventListener("keyup", function(event){
	  	throttle(queryData, null,500,this.value,1000);
	});
	        
function throttle(fn,context,delay,text,mustApplyTime){
  clearTimeout(fn.timer);
  fn._cur=Date.now();  //记录当前时间
 
  if(!fn._start){      //若该函数是第一次调用，则直接设置_start,即开始时间，为_cur，即此刻的时间
    fn._start=fn._cur;
  }
  if(fn._cur-fn._start>mustApplyTime){        //当前时间与上一次函数被执行的时间作差，与mustApplyTime比较，若大于，则必须执行一次函数，若小于，则重新设置计时器
     fn.call(context,text);
     fn._start=fn._cur;
  }else{
    fn.timer=setTimeout(function(){
    fn.call(context,text);
    },delay);
  }
}
</script>
</body>  
</html>

Copier après la connexion

Explication détaillée de la fonction de limitation JavaScript Throttle

Parlez de limitation de fonction dans JS

2. Fonction anti-rebond (anti-rebond)

Avant d'expliquer cette fonction, jetons un coup d'œil à un exemple : page d'inscription, le numéro de téléphone doit être vérifié . À ce stade, nous pouvons penser à écouter l’événement de pression de touche, puis à le vérifier. Cette méthode en elle-même est correcte, mais si l'utilisateur saisit rapidement une série de numéros de téléphone portable , 11 requêtes seront déclenchées en un instant, ce qui n'est sans doute pas ce que nous souhaitons. Ce que nous voulons, c'est déclencher la demande de vérification lorsque l'utilisateur arrête de taper. À ce moment-là, la fonction anti-shake peut nous aider.

function debounce(func, wait, immediate) {
    var timeout; // 持久化一个定时器
     // 闭包函数可以访问timeout
    return function() {
    	 // 通过 this 和 arguments 获得函数的作用域和参数
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout); // 如果事件被触发，清除timer并重新开始计时
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Copier après la connexion

Le paramètre fonction est la fonction qui doit être anti-secousse ; le paramètre wait est le temps d'attente, en millisecondes si le paramètre immédiat est vrai, la fonction anti-rebond exécutera la fonction immédiatement ; lorsqu'il est appelé, sans attendre le temps d'attente, ce paramètre peut être utilisé, par exemple, pour empêcher plusieurs clics lors du clic sur le bouton soumettre.

Liezi :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>函数防抖与节流 </title>
</head>
<body>
	<form class="form-cnt" action="" method="">
			<input type="text" value="" id="tel"/>
	</form>
	<script type="text/javascript" src="js/jQuery-2.1.4.min.js" ></script>
<script>
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

function checkTel(){
	var val = $("#tel").val();  
	 var  re = new RegExp("(^1[3|4|5|7|8][0-9]{9}$)");  
	if(re.test(val)){  
	  console.log("结果：格式正确");  
	}else{  
	    console.log("结果：格式错误");  
	}  
}  
var lazyQuery = debounce(checkTel, 300);
$("#tel").on("keypress",lazyQuery);  
</script>
</body>
</html>

Copier après la connexion

Cet effet semble se déclencher 6 fois au lieu de 11 fois

3. Scénarios d'application

(1). Limitation des fonctions (accélérateur)
1. Mouvements de souris/appuis fréquents, tels que mouvements de souris à haute fréquence, tir de jeu
2.
3. Barre de progression (nous n'avons peut-être pas besoin de progression de mise à jour à haute fréquence)
4 Dragover, etc.
5. Clics, tirages à haute fréquence, etc. (haha, maléfique)

(2). Fonction anti-rebond
1. événement de défilement/redimensionnement
2. Saisie de texte continue, vérification ajax/recherche de mots clés

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!