codestory

Die Funktionen setTimeout und setInterval in ECMAScript

View more Tutorials:

Im ECMAScript sind 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- setTimeout() function

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>

 
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!");
 

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.
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() &amp; 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,..
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!");
 

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.

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() &amp; clearInterval() Function</h2>


      <button onclick="startAction()">Show greeting</button>

      <button onclick="cancelAction()">Cancel</button>

   </body>
</html>

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.