В этом руководстве вы узнаете о методе JavaScript setTimeout () с помощью примеров.
setTimeout()
Метод выполняется блок кода по истечении указанного времени. Метод выполняет код только один раз.
Обычно используемый синтаксис JavaScript setTimeout:
setTimeout(function, milliseconds);
Его параметры:
- function - функция, содержащая блок кода
- миллисекунды - время, по истечении которого функция выполняется
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()
Метод возвращает интервал идентификатор. Например,
// 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 ()