Javascript setTimeout ()

Съдържание

В този урок ще научите за метода JavaScript setTimeout () с помощта на примери.

В setTimeout()метода изпълнява блок от код след определено време. Методът изпълнява кода само веднъж.

Често използваният синтаксис на JavaScript setTimeout е:

 setTimeout(function, milliseconds);

Неговите параметри са:

  • функция - функция, съдържаща блок код
  • милисекунди - времето, след което функцията се изпълнява

В setTimeout()метода връща intervalID , което е положително цяло число.

Пример 1: Показване на текст веднъж след 3 секунди

 // program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) setTimeout(greet, 3000); console.log('This message is shown first');

Изход

Това съобщение се показва първо  Hello world

В горната програма setTimeout()методът извиква greet()функцията след 3000 милисекунди ( 3 секунди).

Следователно програмата показва текста Hello world само веднъж след 3 секунди.

Забележка : setTimeout()Методът е полезен, когато искате да изпълните блок от веднъж след известно време. Например показване на съобщение на потребител след посоченото време.

В setTimeout()метода връща интервал ID. Например,

 // program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) let intervalId = setTimeout(greet, 3000); console.log('Id: ' + intervalId); 

Изход

 Id: 3 Здравей, свят

Пример 2: Показване на време на всеки 3 секунди

 // program to display time every 3 seconds function showTime() ( // return new date and time let dateTime= new Date(); // returns the current local time let time = dateTime.toLocaleTimeString(); console.log(time) // display the time after 3 seconds setTimeout(showTime, 3000); ) // calling the function showTime();

Изход

 17:45:39 17:45:43 17:45:47 17:45:50 … 

Горната програма показва времето на всеки 3 секунди.

В setTimeout()метода нарича функция само веднъж след интервал от време (в случая 3 секунди).

Въпреки това, в горната програма, тъй като функцията се извиква, програмата показва времето на всеки 3 секунди.

Тази програма работи за неопределено време (до изчерпване на паметта).

Забележка : Ако трябва да изпълните функция няколко пъти, по-добре е да използвате setInterval()метода.

JavaScript clearTimeout ()

Както видяхте в горния пример, програмата изпълнява блок от код след посочения интервал от време. Ако искате да спрете извикването на тази функция, можете да използвате clearTimeout()метода.

Синтаксисът на clearTimeout()метода е:

 clearTimeout(intervalID);

Тук, intervalIDе връщаната стойност на setTimeout()метода.

Пример 3: Използвайте метода clearTimeout ()

 // program to stop the setTimeout() method let count = 0; // function creation function increaseCount()( // increasing the count by 1 count += 1; console.log(count) ) let id = setTimeout(increaseCount, 3000); // clearTimeout clearTimeout(id); console.log('setTimeout is stopped.');

Изход

 setTimeout е спрян.

В горната програма setTimeout()методът се използва за увеличаване на стойността на броя след 3 секунди. Обаче clearTimeout()методът спира извикването на функцията на setTimeout()метода. Следователно стойността на броя не се увеличава.

Забележка : Обикновено използвате clearTimeout()метода, когато трябва да отмените setTimeout()извикването на метода, преди да се случи.

Можете също да предадете допълнителни аргументи на setTimeout()метода. Синтаксисът е:

 setTimeout(function, milliseconds, parameter1,… .paramenterN);

Когато предадете допълнителни параметри на setTimeout()метода, тези параметри ( parameter1, parameter2и т.н.) ще бъдат предадени на посочената функция .

Например,

 // program to display a name function greet(name, lastName) ( console.log('Hello' + ' ' + name + ' ' + lastName); ) // passing argument to setTimeout setTimeout(greet, 1000, 'John', 'Doe');

Изход

 Здравей Джон Доу

В горната програма два параметъра Johnи Doeсе предават на setTimeout()метода. Тези два параметъра са аргументите, които ще бъдат предадени на функцията (тук, greet()функция), която е дефинирана вътре в setTimeout()метода.

Препоръчително четене: JavaScript async () и await ()

Интересни статии...