Die Funktionen setTimeout und setInterval in JavaScript
Im ECMAScriptsind setTimeout(func, time) und setInterval(func,time) 2 so gleiche Funktionen. Sie werden die Zeit gesetzt um eine Aufgabe durchzuführen.In dieser Unterricht werde ich jede Funktion nacheinander.
1. Hàm setTimeout()
Die Funktion setTimeout(func, delay) setzt einen Milisekunden Zeitraum 'delay' , wenn der Zeitraum vergeht, wird die Funktion func alleiniges Mal aufgeruft.
Achtung: 1 Sekunde = 1000 milisekunde.
Die Syntax:
setTimeout(func, delay)
- func: Diese Funktion wird nach dem Milisekunde Zeitraum delay' aufgeruft.
- delay: der Verspätung Zeitraum (in Milisekunde gerechnet)
Unter ist das ein einfaches Beispiel mit der Funktion setTimeout(). Nach 3 Sekunden ab wenn der Benutzer auf die Button "Show greeting" klickt, wird eine Begrüssung angezeigt werden
setTimeout-example.html
<!DOCTYPE html>
<html>
<head>
<title>setTimeout function</title>
<script type="text/javascript">
function greeting() {
alert("Hello Everyone!");
}
function startAction() {
setTimeout(greeting, 3000); // 3 seconds.
}
</script>
</head>
<body>
<h2>setTimeout Function</h2>
<button onclick="startAction()">Show greeting</button>
</body>
</html>
![](https://s1.o7planning.com/web-rs/web-image/de/arf-1130306-vi.gif)
Ein anderes Beispiel mit der Funktion setTimeout(), Sie können das Beispiel àuf die Umwelt NodeJS laufen:
setTimeout-example.js
console.log("3");
console.log("2");
console.log("1");
console.log("Call setTimeout!");
setTimeout( function() {
console.log("Hello Everyone!");
}, 3000); // 3 seconds
console.log("End!");
![](https://s1.o7planning.com/web-rs/web-image/de/arf-1130314-vi.gif)
clearTimeout()
Angenommen, Sie ruft die Funktion setTimeout() auf um die Durchführung einer Aufgabe zu timen. Während diese Aufgabe nicht durchzuführen beginnt, können Sie durch die Aufruf der Funktion clearTimeout() diese Aufgabe absagen.
![](https://s1.o7planning.com/web-rs/web-image/de/arf-1130321-vi.gif)
clearTimeout-example.html
<!DOCTYPE html>
<html>
<head>
<title>clearTimeout function</title>
<script type="text/javascript">
var myTask = null;
function greeting() {
alert("Hello Everyone!");
myTask = null;
}
function startAction() {
if(!myTask) {
myTask = setTimeout(greeting, 3000); // 3 seconds.
}
}
function cancelAction() {
if(myTask) {
clearTimeout(myTask);
myTask = null;
}
}
</script>
</head>
<body>
<h2>setTimeout() & clearTimeout() Function</h2>
<button onclick="startAction()">Show greeting</button>
<button onclick="cancelAction()">Cancel</button>
</body>
</html>
2. Die Funktion setInterval()
Die Funktion setInterval(func, delay) setzt einen Milisekunde Zeitraum 'delay'. Nach jeder 'delay' Milisekunde wird die Funktion func wieder aufgeruft.
Die Syntax
setInterval(func, delay)
- func: Diese Funktion wird nach jeden Milisekunde 'delay' Zeitraum geruft.
- delay:der Verspätung Zeitraum (in Milisekunde)
Unter ist das ein einfaches Beispiel mit der Funktion setInterval(). Nach 3 Sekunden ab wenn der Benutzer auf die Button "Show greeting" klickt,wird eine Begrüssung anzeigen. Und sie wird nach 3 Sekunde anzeigen,..
![](https://s1.o7planning.com/web-rs/web-image/de/arf-1130358-vi.gif)
setInterval-example.html
<!DOCTYPE html>
<html>
<head>
<title>setInterval function</title>
<script type="text/javascript">
function greeting() {
alert("Hello Everyone!");
}
function startAction() {
setInterval(greeting, 3000); // 3 seconds.
}
</script>
</head>
<body>
<h2>setInterval Function</h2>
<button onclick="startAction()">Show greeting</button>
</body>
</html>
Ein anderes Beispiel mit der Funktion setInterval() können Sie das Beispiel auf die Umwelt NodeJS laufen:
setInterval-example.js
console.log("3");
console.log("2");
console.log("1");
console.log("Call setInterval!");
setInterval( function() {
console.log("Hello Everyone!");
}, 3000); // 3 seconds
console.log("End!");
![](https://s1.o7planning.com/web-rs/web-image/de/arf-1130366-vi.gif)
clearInterval()
Angenommen, Sie rufen die Funktion setInterval() auf um für die Durchführung einer Aufgabe zu time. Sie können durch die Aufruf von der Funktion clearInterval() diese Aufgabe absagen.
![](https://s1.o7planning.com/web-rs/web-image/de/arf-1130373-vi.gif)
clearInterval-example.html
<!DOCTYPE html>
<html>
<head>
<title>clearInterval function</title>
<script type="text/javascript">
var myTask = null;
function greeting() {
alert("Hello Everyone!");
}
function startAction() {
if(!myTask) {
myTask = setInterval(greeting, 3000); // 3 seconds.
}
}
function cancelAction() {
if(myTask) {
clearInterval(myTask);
myTask = null;
}
}
</script>
</head>
<body>
<h2>setInterval() & clearInterval() Function</h2>
<button onclick="startAction()">Show greeting</button>
<button onclick="cancelAction()">Cancel</button>
</body>
</html>
Anleitungen ECMAScript, Javascript
- Einführung in Javascript und ECMAScript
- Schnellstart mit Javascript
- Dialogfeld Alert, Confirm, Prompt in Javascript
- Schnellstart mit JavaScript
- Die Anleitung zu JavaScript Variable
- Bitweise Operationen
- Die Anleitung zu JavaScript Array
- Schleifen in JavaScript
- Die Anleitung zu JavaScript Function
- Die Anleitung zu JavaScript Number
- Die Anleitung zu JavaScript Boolean
- Die Anleitung zu JavaScript String
- if else Anweisung in JavaScript
- Switch Anweisung in JavaScript
- Die Anleitung zu JavaScript Error
- Die Anleitung zu JavaScript Date
- Die Anleitung zu JavaScript Module
- Die Geschichte der Module in JavaScript
- Die Funktionen setTimeout und setInterval in JavaScript
- Die Anleitung zu Javascript Form Validation
- Die Anleitung zu JavaScript Web Cookie
- Schlüsselwort void in JavaScript
- Klassen und Objekte in JavaScript
- Klasse und Vererbung Simulationstechniken in JavaScript
- Vererbung und Polymorphismus in JavaScript
- Das Verständnis über Duck Typing in JavaScript
- Die Anleitung zu JavaScript Symbol
- Die Anleitung zu JavaScript Set Collection
- Die Anleitung zu JavaScript Map Collection
- Das Verständnis über JavaScript Iterable und Iterator
- Die Anleitung zu JavaScript Reguläre Ausdrücke
- Die Anleitung zu JavaScript Promise, Async Await
- Die Anleitung zu Javascript Window
- Die Anleitung zu Javascript Console
- Die Anleitung zu Javascript Screen
- Die Anleitung zu Javascript Navigator
- Die Anleitung zu Javascript Geolocation API
- Die Anleitung zu Javascript Location
- Die Anleitung zu Javascript History API
- Die Anleitung zu Javascript Statusbar
- Die Anleitung zu Javascript Locationbar
- Die Anleitung zu Javascript Scrollbars
- Die Anleitung zu Javascript Menubar
- Die Anleitung zu Javascript JSON
- Ereignisbehandlung in JavaScript
- Die Anleitung zu Javascript MouseEvent
- Die Anleitung zu Javascript WheelEvent
- Die Anleitung zu Javascript KeyboardEvent
- Die Anleitung zu Javascript FocusEvent
- Die Anleitung zu Javascript InputEvent
- Die Anleitung zu Javascript ChangeEvent
- Die Anleitung zu Javascript DragEvent
- Die Anleitung zu Javascript HashChangeEvent
- Die Anleitung zu Javascript URL Encoding
- Die Anleitung zu Javascript FileReader
- Die Anleitung zu Javascript XMLHttpRequest
- Die Anleitung zu Javascript Fetch API
- Analysieren Sie XML in Javascript mit DOMParser
- Einführung in Javascript HTML5 Canvas API
- Hervorhebung Code mit SyntaxHighlighter Javascript-Bibliothek
- Was sind Polyfills in der Programmierwissenschaft?
Show More