AngularJS-Dirty-Checking-Mechanismus und die wunderbare Verwendung von $timeout-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

AngularJS-Dirty-Checking-Mechanismus und die wunderbare Verwendung von $timeout

陈政宽～

Jun 28, 2017 pm 02:42 PM

angularjs javascript timeout

In diesem Artikel wird hauptsächlich die detaillierte Erklärung vonAngularJSDirty-Check-Mechanismus und die wunderbare Verwendung von $timeout vorgestellt. „Dirty-Check“ ist einer der Kernmechanismen in Angular -way-Bindung und MVVM-Modus. Interessierte können sich über

|| Browser-Ereignisschleife und Angulars MVW

informieren „ist einer der Kernmechanismen in Angular First und eine wichtige Grundlage für die Realisierung der bidirektionalen Bindung und des MVVM-Modus.

Angular konvertiert die bidirektionale Bindung in eine Reihe von Überwachungsausdrücken und prüft dann rekursiv, ob sich die Ergebnisse dieser Überwachungsausdrücke geändert haben. Wenn ja, führen Sie den entsprechenden Watcher aus Funktion. Wenn sich der Wert des Modells nicht mehr ändert, werden keine weiteren Watcher-Funktionen ausgelöst und ein vollständiger Digest-Zyklus endet.

Da wir schnell NodeJS-Programme mit derselben Sprache und demselben Ereignismodell entwickeln können, ohne unser Programmierdenken zu ändern, wurde NodeJS schnell populär,

JavaScript Full-Stack Es wird auch immer beliebter immer beliebter.

Wir hören oft, dass Angular ein MV*-Framework ist. Dies liegt daran, dass Angular das Ereignismodell des Browsers erweitert und einen eigenen Kontext erstellt.

||Die $watch-Funktion in Angular

Der watch-Ausdruck ist sehr flexibel: Es kann eine Funktion oder ein Eigenschaftsname auf $scope sein kann auch ein Ausdruck in der Form

string sein. Der Attributname oder Ausdruck auf $scope wird schließlich vom $parse-Dienst in eine entsprechende Funktion geparst, um den Attributwert zu erhalten.

Alle Watcher-Funktionen werden durch die Unshift-Funktion zur späteren Verwendung durch $digest in den Kopf des Scope.$$watchers-Arrays eingefügt.

Schließlich gibt die $watch-Funktion eine Anti-Registrierungsfunktion zurück. Sobald wir sie aufrufen, können wir den gerade registrierten Watcher entfernen.

Es ist zu beachten, dass Angular die Funktion angle.equals() standardmäßig nicht für tiefe Vergleiche verwendet, da der ===-Vergleich schneller ist und daher Arrays oder Objekte vergleicht überprüft wird, ist die Referenz. Dies führt dazu, dass zwei Ausdrücke mit genau demselben Inhalt als unterschiedlich beurteilt werden. Wenn ein detaillierter Vergleich erforderlich ist, muss der dritte optionale Parameter objectEquality explizit auf true gesetzt werden, z. B. $watch('someExp', function(){...}, true).

Angular bietet außerdem die Methoden $watchGroup und $watchCollection, um Arrays oder eine Gruppe von Eigenschaften zu überwachen.

||Die $digest-Funktion in Angular

Wie bereits erwähnt, erweitert Angular die Ereignisschleife des Browsers.

Wenn das von der Ereignisanweisung in der Ansicht weitergeleitete Ereignis akzeptiert wird, wird der Kontext von Angular geändert, um auf solche Ereignisse zu reagieren, und die $digest-Schleife wird ausgelöst.

$digest-Schleife besteht eigentlich aus zwei

while-Schleifen. Dies sind: die asynchrone Operationswarteschlange, die $evalAsync verarbeitet, und die Watchers-Warteschlange, die $watch verarbeitet.

Wenn die $digest-Schleife auftritt, durchläuft sie alle Watcher-Funktionen, die im aktuellen $scope und allen seinen untergeordneten $scopes registriert sind.

Das Durchlaufen aller Watcher-Funktionen wird als Dirty Check bezeichnet. Wenn sich nach der Durchführung einer Dirty-Check-Runde der von einem Beobachter überwachte Wert geändert hat, wird eine weitere Dirty-Check-Runde durchgeführt, bis alle Watcher-Funktionen melden, dass sich die von ihnen überwachten Werte nicht mehr geändert haben.

Wenn die $digest-Schleife endet, werden die Ergebnisse der Modelländerung im DOM aktualisiert. Dies ermöglicht das Zusammenführen mehrerer Updates und verhindert häufige DOM-Eigenschaften.

Es ist zu beachten, dass vor dem Ende des $digest-Zyklus, wenn mehr als 10 Runden von Dirty Checks überschritten werden, eine Ausnahme ausgelöst wird, um zu verhindern, dass die Dirty Checks auf unbestimmte Zeit fortgesetzt werden.

Wann wird es in diesen Angular-Kontext eintreten und den „Dirty-Check-Mechanismus“ auslösen? Diese Frage ist sehr wichtig und auch problematisch.

Jedes Ereignis, das in den Angular-Kontext eintritt, führt eine $digest-Schleife aus. Für die von ngModel überwachte interaktive Formularsteuerung wird bei jeder Zeicheneingabe eine Schleife ausgelöst, um die $watcher-Funktion zu überprüfen, damit die Ansicht rechtzeitig aktualisiert werden kann. Nach Angular 1.3 können Sie ngModelOptions zur Konfiguration verwenden, um die Standardauslösemethode zu ändern.

||$apply

$digest in Angular ist eine

interne Funktion, die nicht direkt im normalen Anwendungscode verwendet werden sollte Nenn es. Wenn Sie es aktiv auslösen möchten, müssen Sie die Funktion „scope.$apply“ aufrufen, eine gemeinsame öffentliche Schnittstelle, die den „Dirty-Checking-Mechanismus“ von Angular auslöst.

Es ist zu beachten, dass Angular nur die ihm bekannten verhaltensauslösenden Methoden verwalten kann, aber nicht alle Angular-Betriebsszenarien abdecken kann. Aus diesem Grund können wir beim Kapseln des jQuery-Plug-ins eines Drittanbieters die Ansicht nicht automatisch aktualisieren, sondern müssen $scope.$apply manuell aufrufen.

Bei der Integration des JQuery-Plug-Ins treten manchmal Digest-in-Progress-Fehler auf. Wenn der Fehler nach der Beseitigung immer noch nicht behoben werden kann, können Sie erwägen, ihn mit $timeout zu beheben.

Die wunderbare Verwendung von $timeout

Wenn die an die Schnittstelle gebundenen Variablen in der verzögerten Aufgabe geändert werden, löst window.setTimeout keinen „Dirty Check“ zur Aktualisierung der UI-Schnittstelle aus. Sie denken vielleicht: Das Hinzufügen von $scope.$apply wird das Problem lösen. Ja, dies kann das Problem der Aktualisierung der Benutzeroberfläche lösen, aber Sie könnten auf ein anderes Problem stoßen:

Fehler: $digest bereits in Bearbeitung

Wie ist das? An? Oh, Angular führt intern „Dirty Checking“ durch. Ein kluger Programmierer hat geschickt den folgenden Code geschrieben, um dieses Problem zu lösen:

function safeApply(scope, fn){ 
  (scope.
phase||scope.$root.
phase) ? fn() : scope.$apply(fn); 
}

Im Code, bei der Ausführung Vor dem Wenn Sie die Funktion „Dirty Checking“ anwenden, wird zunächst geprüft, ob Angular intern eine „Dirty Checking“ durchführt. Andernfalls führt $Apply die Funktion direkt aus, wenn keine Dirty Checking gestartet wird. Haha, eine „perfekte“ Lösung, nicht wahr?

Bitte beachten Sie, dass der Autor oben das Wort „perfekt“ in Anführungszeichen gesetzt hat. Angular verfügt über einen für uns integrierten $timeout-Dienst, der durch Angular-Umschließen von nativem Javascript window.setTimeout implementiert wird.

$timeout hat viele wunderbare Verwendungsmöglichkeiten, aber stellen Sie sicher, dass die Implementierung der Apply-Funktion mit $timeout nicht unsere erste Lösung ist. Die erste Lösung sollte immer noch die Verwendung von Angular sein -in Anweisungen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird. Ich hoffe auch, dass jeder Script House unterstützt.

Das obige ist der detaillierte Inhalt vonAngularJS-Dirty-Checking-Mechanismus und die wunderbare Verwendung von $timeout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

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

Rimworld Odyssey -Temperaturführer für Schiffe und Gravtech

1 Monate vor By Jack chen

Anfängerleitfaden zu Rimworld: Odyssey

1 Monate vor By Jack chen

Variabler PHP -Bereich erklärt

4 Wochen vor By 百草

Tipps zum Schreiben von PHP -Kommentaren

3 Wochen vor By 百草

Code in PHP aus dem Code ausgehen

3 Wochen vor By 百草

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

Laravel-Tutorial

1604

PHP-Tutorial

1509

276

Related knowledge

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.

Wie kann der Bluescreen des Win11-Uhr-Watchdog-Timeouts behoben werden? Feb 14, 2024 pm 04:00 PM

Bei vielen Benutzern wird nach dem Upgrade des Win11-Systems ein Bluescreen auftreten, z. B.: Clockwatchdogtimeout-Bluescreen. Wie lässt sich das Problem lösen? Benutzer können den Treiber aktualisieren oder auf Überhitzungsprobleme usw. prüfen. Auf dieser Website wird den Benutzern die Lösung für den Clockwatchdogtimeout-Bluescreen in Win11 sorgfältig vorgestellt. Lösung für den Clockwatchdogtimeout-Bluescreen in Win11 1. Aktualisieren Sie den Treiber: Durch Aktualisieren der CPU- und Motherboard-Treiber kann das Problem möglicherweise behoben werden. Sie können die neuesten Treiber herunterladen, indem Sie die Website des Herstellers besuchen. 2. Suchen Sie nach Überhitzungsproblemen: Überhitzung kann ebenfalls eine der Ursachen für diesen Fehler sein.

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Dec 17, 2023 pm 12:09 PM

Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript Dec 17, 2023 am 09:39 AM

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.

So verwenden Sie insertBefore in Javascript Nov 24, 2023 am 11:56 AM

Verwendung: In JavaScript wird die Methode insertBefore() verwendet, um einen neuen Knoten in den DOM-Baum einzufügen. Diese Methode erfordert zwei Parameter: den neuen Knoten, der eingefügt werden soll, und den Referenzknoten (d. h. den Knoten, an dem der neue Knoten eingefügt wird).

See all articles