📚
Lerndokumentationen
Web
Web
  • Willkommen
  • HTML
    • Was ist HTML?
    • Elemente
    • Attribute
    • Boilerplate
  • Textelemente
  • Links
  • Dokumentenstruktur
  • Medien
  • Tabellen
  • Formulare
  • CSS
    • Was ist CSS?
    • Syntax
  • Einheiten
  • Selektoren
  • Boxmodell
  • Hintergründe und Rahmen
  • Overflow
  • Bilder
  • Formulare
  • Textelemente
  • Layout
    • Flexbox
    • Grid
  • Responsive Design
  • JavaScript
    • Was ist JavaScript?
    • Einbindung in HTML
    • Grundlagen
      • Variablen und Werte
      • Datentypen
      • Operatoren und Ausdrücke
      • Kontrollstrukturen
      • Schleifen
    • Funktionen
      • Funktionsdeklarationen vs. Funktionsausdrücke
      • Arrow Functions
      • Standardparameter und Rest-Parameter
      • First-Class und Higher-Order-Funktionen
      • Closures
      • IIFE (Immediately Invoked Function Expressions)
    • Arrays
      • Erstellen und Modifizieren
      • Iteration über Arrays
      • Sortieren
      • Nützliche Methoden
    • Objekte und Datenstrukturen
      • Erstellen und Manipulieren
      • Destructuring
      • Sets und Maps
    • Strings
      • Template Literals
      • Methoden
    • Moderne JavaScript-Features
      • Optionale Verkettung
      • Nullish Coalescing Operator
      • Spread und Rest Operator
      • Kurzschlussausdrücke
    • Scope und Kontext
      • this Keyword
      • Call, Apply und Bind
      • Hoisting und Temporal Dead Zone (TDZ)
    • Objektorientierte Programmierung
      • Prototypes
      • Constructor Functions
      • ES6 Classes
      • Die create()-Methode
    • Asynchronous JavaScript
      • AJAX
      • Promises
    • Zahlen, Daten, Internationalisierung und Timer
      • Mathematische Operationen
      • Datum und Zeit
      • Internationalisierung
      • Timer
    • Modules
    • JavaScript im Browser (DOM und Events)
      • Das DOM
      • Elemente auswählen, erstellen und manipulieren
      • Styles, Attribute und Klassen
      • Events und Event Listener
      • Event Propagation
        • Event Delegation
      • DOM Traversing
    • JavaScript Engine und Performance
      • Execution Context und Call Stack
  • TypeScript
    • Was ist TypeScript?
  • Compiler und Runtimes
  • Konfiguration
  • Types
    • Primitive Typen und Typableitung
    • Arrays und Tupel
    • Objekte
    • Top- und Bottom-Types
    • Enums
    • Utility Types
      • Records
  • Typenkombination
    • Union Types
    • Discriminated Unions
    • Intersections
  • Funktionen
  • Klassen
    • Grundlagen
    • Feldinitialisierer
    • Schreibgeschützte Felder
    • Implementieren
    • Private und Geschützte Member
    • Getter und Setter
    • Statische Member
    • Abstrakte Klassen und Member
  • Modules
    • Importieren und Exportieren
    • Ambient Types
    • Namespaces
    • Globals
  • React
    • Was ist React?
    • JSX
    • Komponenten
      • Root-Komponente
      • Styling
      • Listen
      • Conditional Rendering
      • Fragments
    • Props
      • Destructuring
      • Children
    • Interaktivität
      • Event Handling
      • State
      • Formulare
    • State Management
      • State anheben
      • Derived State
    • Komposition und Reusability
      • Komponentenstrukturierung
      • Prop Drilling
      • Komposition
Bereitgestellt von GitBook
Auf dieser Seite
  • setTimeout()-Methode
  • Argumente mitgeben
  • Timer abbrechen
  • setInterval()-Methode
  1. JavaScript
  2. Zahlen, Daten, Internationalisierung und Timer

Timer

Es gibt zwei Arten von Timern: setTimeout und setInterval.

setTimeout()-Methode

Die setTimeout()-Methode führt Code in der Zukunft aus. Die Methode verlangt zwei Argumente: eine Callback-Funktion, die aufgerufen wird und eine Zeit in ms.

Das zweite Argument bestimmt, wann die Callback-Methode aufgerufen wird.

setTimeout(() => console.log('Here is your pizza 🍕'), 3000);

So wird z.B. diese Methode nach 3s oder eben 3000ms aufgerufen.

Jeglicher Code der nach der setTimeout()-Methode aufgerufen wird, wartet nicht auf das Abschliessen der genannten Methode, sondern sie laufen sofort weiter.

Argumente mitgeben

Um der Callback-Methode Argumente mitzugeben, müssen wir sie nach dem timeOut-Argument angeben:

setTimeout(
  (ingredients, type) => {
    console.log(
      `Here is your ${type} with ${ingredients.join(' and ')} ${type === 'pizza' ? '🍕' : ''}`
    );
  },
  3000,
  ['olives', 'spinach'],
  'pizza'
);

Timer abbrechen

Wir haben auch die Möglichkeit den Timer abzubrechen, wenn etwas Bestimmtes passiert. Dafür nutzen wir die Methode clearTimeout():

const ingredients = ['olives', 'spinach'];

const pizzaDelivery = setTimeout(
  (ingredients, type) => {
    console.log(
      `Here is your ${type} with ${ingredients.join(' and ')} ${type === 'pizza' ? '🍕' : ''}`
    );
  },
  3000,
  ingredients,
  'pizza'
);

if (ingredients.includes('spinach')) {
  clearTimeout(pizzaDelivery);
}

Falls die Pizzazutaten Spinat enthalten, wird die Bestellung abgebrochen, da die Pizzeria keinen Spinat mehr über hat.

setInterval()-Methode

Die setInterval()-Methode ruft eine Callback-Funktion in regelmässigen Abständen auf, z.B. 1 Sekunde oder 10 Minuten. Die Syntax ist gleich, wie bei der setTimeout()-Methode: eine Callback-Funktion, eine Zeit in ms und allenfalls Argumente für die Callback-Funktion.

const clock = setInterval(() => {
  const now = new Date();
  console.log(
    new Intl.DateTimeFormat('de-CH', { timeStyle: 'medium' }).format(now)
  );
}, 1000);

Mit der setInterval()-Methode können wir so z.B. eine Uhr bauen.

VorherigeInternationalisierungNächsteModules

Zuletzt aktualisiert vor 3 Monaten