suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der js-Hochleistungsfunktion Anti-Shake und Throttling

Detaillierte Erläuterung der js-Hochleistungsfunktion Anti-Shake und Throttling

小云云
小云云Original
2018-03-17 15:01:571779Durchsuche

Funktionsdrosselung bedeutet, dass die js-Methode nur einmal innerhalb eines bestimmten Zeitraums ausgeführt wird. Funktion Anti-Shake: bedeutet, dass der Code bei häufiger Auslösung nur einmal ausgeführt wird, wenn genügend freie Zeit vorhanden ist. Dieser Artikel teilt Ihnen hauptsächlich die detaillierte Erklärung der js-Hochleistungsfunktion Anti-Shake und Throttling mit. Ich hoffe, dass sie allen helfen kann.

1. Funktionsdrosselung (Throttle)

1. Der Zweck der Funktionsdrosselung
DOM-Vorgänge erfordern beispielsweise mehr Speicher und CPU-Zeit als Nicht-DOM-Interaktionen. Der Versuch, zu viele DOM-bezogene Vorgänge nacheinander auszuführen, kann dazu führen, dass der Browser hängen bleibt und manchmal sogar abstürzt. Dies ist besonders wahrscheinlich, wenn der Ereignishandler onresize im IE verwendet wird. Wenn die Größe des Browsers geändert wird, wird das Ereignis kontinuierlich ausgelöst. Wenn Sie versuchen, DOM-Vorgänge innerhalb des onresize-Ereignishandlers auszuführen, kann die hohe Änderungshäufigkeit dazu führen, dass der Browser abstürzt. Als weiteres Beispiel binden wir für unsere allgemeine Suchfunktion normalerweise das Keyup-Ereignis und suchen jedes Mal, wenn die Tastatur gedrückt wird. Unser Zweck besteht jedoch hauptsächlich darin, jedes Mal zu suchen, wenn wir Inhalte eingeben. Um diese Probleme zu lösen, können Sie Timer verwenden, um Funktionen zu drosseln.
2. Prinzip der Funktionsdrosselung
Einige Codes können nicht kontinuierlich und wiederholt ohne Unterbrechung ausgeführt werden. Beim ersten Aufruf der Funktion wird ein Timer erstellt, um Code nach einem bestimmten Intervall auszuführen. Wenn die Funktion ein zweites Mal aufgerufen wird, löscht sie den vorherigen Timer und setzt einen anderen. Wenn der vorherige Timer bereits ausgeführt wurde, hat dieser Vorgang keine Bedeutung. Wenn der vorherige Timer jedoch noch nicht ausgeführt wurde, wird er tatsächlich durch einen neuen Timer ersetzt. Der Zweck besteht darin, die Funktion erst auszuführen, nachdem die Anforderung zur Ausführung für einige Zeit gestoppt wurde.

3. Grundmodus der Funktionsdrosselung

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

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>

Detaillierte Erläuterung der JavaScript-Drosselungsfunktion Throttle

Sprechen Sie über die Funktionsdrosselung in JS

2. Funktionsentprellung (Debounce)

Bevor wir diese Funktion erklären, werfen wir einen Blick auf ein Beispiel: Auf der Registrierungsseite muss die Telefonnummer überprüft werden . An diesem Punkt könnten wir daran denken, das Tastendruckereignis abzuhören und es dann zu überprüfen. Diese Methode an sich ist korrekt, aber wenn der Benutzer schnell eine Reihe von Mobiltelefonnummern eingibt , werden sofort 11 Anfragen ausgelöst, was zweifellos nicht das ist, was wir wollen. Was wir wollen, ist, die Verifizierungsanforderung auszulösen, wenn der Benutzer aufhört zu tippen. Zu diesem Zeitpunkt kann uns die Funktion Anti-Shake helfen. 

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

Die Parameterfunktion ist die Funktion, die Anti-Shake sein muss. Der Parameter „Wartezeit“ ist die Wartezeit in Millisekunden. Wenn der Parameter „Immediate“ wahr ist, führt die Entprellfunktion die Funktion sofort aus Wenn es aufgerufen wird, ohne auf die Wartezeit zu warten, kann dieser Parameter beispielsweise verwendet werden, um Mehrfachklicks beim Klicken auf die Schaltfläche „Senden“ zu verhindern.

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>


Dieser Effekt wird 6-mal statt 11-mal ausgelöst

3. Anwendungsszenarien

(1). Funktionsdrosselung (Throttle)
1. Häufige Mausbewegungen/Tastenbetätigungen, z.
3. Fortschrittsbalken (wir benötigen möglicherweise keinen hochfrequenten Aktualisierungsfortschritt)
4. Hochfrequente Klicks, Draws usw. (haha, böse)

(2). Funktion entprellen
1. Scroll-/Größenänderungsereignis
2. Kontinuierliche Texteingabe, Ajax-Überprüfung/Schlüsselwortsuche

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der js-Hochleistungsfunktion Anti-Shake und Throttling. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiele für die Konvertierung zwischen Base64-Zeichenfolgen und BildernNächster Artikel：Beispiele für die Konvertierung zwischen Base64-Zeichenfolgen und Bildern

In Verbindung stehende Artikel

Mehr sehen