betacode

Функция setTimeout и setInterval в ECMAScript

В ECMAScript, setTimeout(func, time) и setInterval(func,time) это два довольно схожих функций, они приурочены к выполнению обязанности. В этой статье я собираюсь обсудить каждую из этих функций по очереди.

1- setTimeout() function

Функция setTimeout(func, delay)  устанавливает период времени 'delay' (задержки) в милисекундах, когда этот период времени проходит, функция func вызывается только один раз.
Примечание: 1 секунда= 1000 милисекунды.
Синтаксис:

setTimeout(func, delay)
  • func: Дання фукнция вызывается после период времени 'delay' (задержки) милисекунды.
  • delay: Период времени задержки (в милисекундах)
Ниже является простой пример с функцией setTimeout(). После 3 секунд, как пользователь нажал на "Show greeting" отобразится приветствие.
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>

 
Другой пример с функцией setTimeout(), вы можете запустить данный пример в среде NodeJS:
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()

Например вы вызываете setTimeout() для планирования выполнения задачи, в то время как задача еще не запущена, вы можете отменить эту задачу, вызвав функцию clearTimeout().
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- Функция setInterval()

Функция setInterval(func, delay) устанавливает период времени 'delay' в мили секундах, после каждой милисекунды 'delay', вызывается функция func.
Синтаксис:

setInterval(func, delay)
  • func: Данная функция вызывается после каждого перирода времени 'delay' в милисекундах.
  • delay: Период времени задержки (в милисекундах)
Ниже является простой пример с функцией setInterval(). После 3 секунд, как пользователь нажал на кнопку "Show greeting" отобразится приветствие, и оно опять отобразится через 3 секунды,..
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>

 
Другой пример с функцией setInterval(), вы можете запустить данный пример на среде NodeJS:
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()

Например вы вызываете функцию setInterval() для планирования выполнения задачи, вы можете отменить эту задачу, вызвав функцию clearInterval().

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>
Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.