Web-Frontend
js-Tutorial
Detaillierte Erläuterung der js-Hochleistungsfunktion Anti-Shake und Throttling
Detaillierte Erläuterung der js-Hochleistungsfunktion Anti-Shake und Throttling
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11
Mar 08, 2024 pm 03:06 PM
Das Windows-Betriebssystem ist eines der beliebtesten Betriebssysteme der Welt und seine neue Version Win11 hat viel Aufmerksamkeit erregt. Im Win11-System ist die Erlangung von Administratorrechten ein wichtiger Vorgang. Mit Administratorrechten können Benutzer weitere Vorgänge und Einstellungen auf dem System durchführen. In diesem Artikel wird ausführlich beschrieben, wie Sie Administratorrechte im Win11-System erhalten und wie Sie Berechtigungen effektiv verwalten. Im Win11-System werden Administratorrechte in zwei Typen unterteilt: lokaler Administrator und Domänenadministrator. Ein lokaler Administrator verfügt über vollständige Administratorrechte für den lokalen Computer
Detaillierte Erläuterung der Divisionsoperation in Oracle SQL
Mar 10, 2024 am 09:51 AM
Detaillierte Erläuterung der Divisionsoperation in OracleSQL In OracleSQL ist die Divisionsoperation eine häufige und wichtige mathematische Operation, die zur Berechnung des Ergebnisses der Division zweier Zahlen verwendet wird. Division wird häufig in Datenbankabfragen verwendet. Daher ist das Verständnis der Divisionsoperation und ihrer Verwendung in OracleSQL eine der wesentlichen Fähigkeiten für Datenbankentwickler. In diesem Artikel werden die relevanten Kenntnisse über Divisionsoperationen in OracleSQL ausführlich erörtert und spezifische Codebeispiele als Referenz für die Leser bereitgestellt. 1. Divisionsoperation in OracleSQL
Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators
Mar 19, 2024 pm 04:33 PM
Der Modulo-Operator (%) in PHP wird verwendet, um den Rest der Division zweier Zahlen zu ermitteln. In diesem Artikel werden wir die Rolle und Verwendung des Modulo-Operators im Detail besprechen und spezifische Codebeispiele bereitstellen, um den Lesern ein besseres Verständnis zu erleichtern. 1. Die Rolle des Modulo-Operators Wenn wir in der Mathematik eine ganze Zahl durch eine andere ganze Zahl dividieren, erhalten wir einen Quotienten und einen Rest. Wenn wir beispielsweise 10 durch 3 dividieren, ist der Quotient 3 und der Rest ist 1. Um diesen Rest zu ermitteln, wird der Modulo-Operator verwendet. 2. Verwendung des Modulo-Operators In PHP verwenden Sie das %-Symbol, um den Modul darzustellen
Detaillierte Erläuterung der Funktion system() des Linux-Systemaufrufs
Feb 22, 2024 pm 08:21 PM
Detaillierte Erläuterung der Funktion system() des Linux-Systems Der Systemaufruf ist ein sehr wichtiger Teil des Linux-Betriebssystems. Er bietet eine Möglichkeit, mit dem Systemkernel zu interagieren. Unter diesen ist die Funktion system() eine der am häufigsten verwendeten Systemaufruffunktionen. In diesem Artikel wird die Verwendung der Funktion system() ausführlich vorgestellt und entsprechende Codebeispiele bereitgestellt. Grundlegende Konzepte von Systemaufrufen Systemaufrufe sind eine Möglichkeit für Benutzerprogramme, mit dem Betriebssystemkernel zu interagieren. Benutzerprogramme fordern das Betriebssystem an, indem sie Systemaufruffunktionen aufrufen
Detaillierte Erläuterung des Linux-Befehls „curl'.
Feb 21, 2024 pm 10:33 PM
Detaillierte Erläuterung des Linux-Befehls „curl“ Zusammenfassung: Curl ist ein leistungsstarkes Befehlszeilentool für die Datenkommunikation mit dem Server. In diesem Artikel wird die grundlegende Verwendung des Curl-Befehls vorgestellt und tatsächliche Codebeispiele bereitgestellt, um den Lesern zu helfen, den Befehl besser zu verstehen und anzuwenden. 1. Was ist Locken? Curl ist ein Befehlszeilentool zum Senden und Empfangen verschiedener Netzwerkanfragen. Es unterstützt mehrere Protokolle wie HTTP, FTP, TELNET usw. und bietet umfangreiche Funktionen wie Datei-Upload, Datei-Download, Datenübertragung und Proxy
Erfahren Sie mehr über Promise.resolve()
Feb 18, 2024 pm 07:13 PM
Eine detaillierte Erklärung von Promise.resolve() erfordert spezifische Codebeispiele. Promise ist ein Mechanismus in JavaScript zur Verarbeitung asynchroner Vorgänge. In der tatsächlichen Entwicklung ist es häufig erforderlich, einige asynchrone Aufgaben zu verarbeiten, die nacheinander ausgeführt werden müssen, und die Methode Promise.resolve () wird verwendet, um ein erfülltes Promise-Objekt zurückzugeben. Promise.resolve() ist eine statische Methode der Promise-Klasse, die a akzeptiert
Detaillierte Analyse der C-Sprachlernroute
Feb 18, 2024 am 10:38 AM
Als weit verbreitete Programmiersprache im Bereich der Softwareentwicklung ist die Sprache C für viele Programmieranfänger die erste Wahl. Das Erlernen der C-Sprache kann uns nicht nur dabei helfen, grundlegende Programmierkenntnisse zu erwerben, sondern auch unsere Problemlösungs- und Denkfähigkeiten verbessern. In diesem Artikel wird eine Roadmap zum Erlernen der C-Sprache im Detail vorgestellt, um Anfängern dabei zu helfen, ihren Lernprozess besser zu planen. 1. Grundlegende Grammatik lernen Bevor wir mit dem Erlernen der C-Sprache beginnen, müssen wir zunächst die grundlegenden Grammatikregeln der C-Sprache verstehen. Dazu gehören Variablen und Datentypen, Operatoren, Steueranweisungen (z. B. if-Anweisungen,
Detaillierte Erläuterung der Numpy-Versionsabfragemethode
Jan 19, 2024 am 08:20 AM
Numpy ist eine Python-Bibliothek für wissenschaftliches Rechnen, die eine Fülle von Array-Operationsfunktionen und -Tools bietet. Wenn Sie die Numpy-Version aktualisieren, müssen Sie die aktuelle Version abfragen, um die Kompatibilität sicherzustellen. In diesem Artikel wird die Methode der Numpy-Versionsabfrage ausführlich vorgestellt und spezifische Codebeispiele bereitgestellt. Methode 1: Verwenden Sie Python-Code, um die Numpy-Version abzufragen. Sie können die Numpy-Version einfach mit Python-Code abfragen. Das Folgende ist die Implementierungsmethode und der Beispielcode: importnumpyasnpprint(np
