JavaScript — универсальный язык программирования, широко используемый для веб-разработки. При собеседовании с кандидатами на позиции JavaScript крайне важно оценить их понимание основных концепций и их способность эффективно решать проблемы. Одной из областей, которая часто исследуется во время интервью, является использование асинхронных операций, и часто используемая функция для введения асинхронности в JavaScript — это setTimeout.
В этой статье мы рассмотрим 15 фрагментов кода, включающих setTimeout, и обсудим их функциональность и вывод. Поняв эти примеры, вы не только получите представление о том, как эффективно использовать setTimeout, но и будете лучше подготовлены к ответам на вопросы, связанные с собеседованием.
Фрагмент кода 1:
setTimeout(() => console.log("Hello, World!"), 1000);
Объяснение.В этом фрагменте кода показано основное использование setTimeout. Функция setTimeout вызывается с двумя аргументами: функцией обратного вызова и задержкой в миллисекундах. В этом случае функция обратного вызова регистрирует «Hello, World!» на консоль после задержки 1000 миллисекунд (1 секунда).
Вывод:
Hello, World!
Фрагмент кода 2:
const greet = () => console.log("Greetings!");
setTimeout(greet, 2000);
Объяснение. Здесь мы определяем функцию greet, которая регистрирует "Привет!" к консоли. Передавая greet в качестве функции обратного вызова в setTimeout с задержкой 2000 миллисекунд (2 секунды), мы гарантируем задержку выполнения функции.
Вывод:
Greetings!
Фрагмент кода 3:
const printMessage = (message) => console.log(message); setTimeout(printMessage, 3000, "This is a delayed message.");
Объяснение. В этом фрагменте мы определяем функцию printMessage, которая принимает параметр message и записывает его в консоль. Предоставляя дополнительный аргумент setTimeout, мы передаем значение «Это отложенное сообщение». в функцию обратного вызова после задержки в 3000 миллисекунд (3 секунды).
Вывод:
This is a delayed message.
Фрагмент кода 4:
let counter = 0; setTimeout(() => console.log(counter++), 1000); setTimeout(() => console.log(counter++), 2000); setTimeout(() => console.log(counter++), 3000);
Объяснение. Здесь мы инициализируем переменную counter значением 0. Три последовательных вызова setTimeout увеличивают значение counter и записывают его в консоль с разной задержкой: 1000 миллисекунд (1 секунда), 2000 миллисекунд (2 секунды) и 3000 миллисекунд (3 секунды).
Вывод:
0 1 2
Фрагмент кода 5:
const fetchData = (id) => {
// Simulating an asynchronous data retrieval
setTimeout(() => console.log(`Data retrieved for ID ${id}`), 1000);
};
for (let i = 1; i <= 5; i++) {
fetchData(i);
}
Объяснение. В этом примере мы определяем функцию fetchData, которая имитирует операцию асинхронного извлечения данных. Он принимает параметр id и выводит сообщение на консоль с соответствующим параметром id. Внутри цикла for мы вызываем fetchData с идентификаторами от 1 до 5.
Вывод:
Data retrieved for ID 1 Data retrieved for ID 2 Data retrieved for ID 3 Data retrieved for ID 4 Data retrieved for ID 5
Фрагмент кода 6:
const tasks = ["Task 1", "Task 2", "Task 3", "Task 4", "Task 5"];
const processTask = (task) => {
console.log(`Processing: ${task}`);
};
tasks.forEach((task, index) => {
setTimeout(() => processTask(task), (index + 1) * 1000);
});
Объяснение. В этом фрагменте у нас есть массив tasks, содержащий разные имена задач. Функция processTask записывает обрабатываемую задачу в консоль. Перебирая массив tasks с помощью forEach, мы планируем выполнение каждой задачи после задержки. Задержка вычисляется динамически на основе индекса задачи, начиная с 1000 миллисекунд (1 секунда) и увеличиваясь на 1000 миллисекунд для каждой последующей задачи.
Вывод:
Processing: Task 1 Processing: Task 2 Processing: Task 3 Processing: Task 4 Processing: Task 5
Фрагмент кода 7:
const delayedSum = (a, b) => {
setTimeout(() => {
const result = a + b;
console.log(`Sum of ${a} and ${b} is ${result}.`);
}, 2000);
};
delayedSum(5, 10);
Объяснение. В этом фрагменте мы определяем функцию delayedSum, которая принимает два параметра a и b. Внутри функции фактическая сумма вычисляется асинхронно с использованием setTimeout с задержкой 2000 миллисекунд (2 секунды). После задержки сумма выводится на консоль.
Вывод:
Sum of 5 and 10 is 15.
Фрагмент кода 8:
let countdown = 5;
const countDownInterval = setInterval(() => {
console.log(countdown);
countdown--;
if (countdown === 0) {
clearInterval(countDownInterval);
console.log("Countdown complete!");
}
}, 1000);
Объяснение. В этом примере мы создаем таймер обратного отсчета, используя setInterval и setTimeout. Начальное значение countdown установлено равным 5. Функция setInterval неоднократно регистрирует значение countdown и уменьшает его каждую секунду (1000 миллисекунд). Когда countdown достигает 0, интервал очищается, и «Обратный отсчет завершен!» регистрируется в консоли.
Вывод:
5 4 3 2 1 Countdown complete!
Фрагмент кода 9:
const fetchDataWithDelay = (id) => {
setTimeout(() => console.log(`Data retrieved for ID ${id}`), Math.random() * 3000);
};
for (let i = 1; i <= 5; i++) {
fetchDataWithDelay(i);
}
Объяснение. В этом фрагменте мы определяем функцию fetchDataWithDelay, которая имитирует операцию асинхронного извлечения данных. Задержка для каждого извлечения данных является случайным значением от 0 до 3000 миллисекунд. Вызывая fetchDataWithDelay в цикле, мы получаем данные для пяти разных идентификаторов со случайными задержками.
Вывод:
Data retrieved for ID 3 Data retrieved for ID 2 Data retrieved for ID 1 Data retrieved for ID 5 Data retrieved for ID 4
Примечание. Порядок вывода может меняться из-за случайных задержек.
Фрагмент кода 10:
const names = ["Alice", "Bob", "Charlie", "Dave", "Eve"];
const greetWithDelay = (name, delay) => {
setTimeout(() => {
console.log(`Hello, ${name}!`);
}, delay);
};
names.forEach((name, index) => {
greetWithDelay(name, (index + 1) * 1000);
});
Объяснение. Здесь у нас есть массив names, содержащий разные имена. Функция greetWithDelay принимает параметр name и delay в миллисекундах. Он записывает персонализированное приветствие на консоль с указанным именем после указанной задержки. Перебирая массив names с помощью forEach, мы планируем каждое приветствие с динамической задержкой, начиная с 1000 миллисекунд (1 секунда) и увеличивая на 1000 миллисекунд для каждого последующего имени.
Вывод:
Hello, Alice! Hello, Bob! Hello, Charlie! Hello, Dave! Hello, Eve!
Фрагмент кода 11:
const fetchDataSequentially = async () => {
const data1 = await fetchDelayedData(1, 2000);
console.log(`Data retrieved for ID 1: ${data1}`);
const data2 = await fetchDelayedData(2, 1500);
console.log(`Data retrieved for ID 2: ${data2}`);
const data3 = await fetchDelayedData(3, 3000);
console.log(`Data retrieved for ID 3: ${data3}`);
};
const fetchDelayedData = (id, delay) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(`Data for ID ${id}`);
}, delay);
});
};
fetchDataSequentially();
Объяснение.В этом фрагменте мы моделируем получение данных последовательно, используя setTimeout и async/await. Функция fetchDelayedData возвращает обещание, которое разрешается с данными для определенного идентификатора после указанной задержки. Функция fetchDataSequentially использует await для последовательного получения данных для трех разных идентификаторов с различными задержками. Как только данные получены, они записываются в консоль.
Вывод:
Data retrieved for ID 1: Data for ID 1 Data retrieved for ID 2: Data for ID 2 Data retrieved for ID 3: Data for ID 3
Фрагмент кода 12:
const fetchDataParallel = async () => {
const promises = [];
for (let i = 1; i <= 5; i++) {
const promise = fetchDelayedData(i, Math.random() * 2000);
promises.push(promise);
}
const results = await Promise.all(promises);
results.forEach((data, index) => {
console.log(`Data retrieved for ID ${index + 1}: ${data}`);
});
};
fetchDataParallel();
Объяснение. В этом фрагменте кода мы имитируем получение данных параллельно, используя setTimeout, async/await и Promise.all(). Функция fetchDelayedData возвращает обещание, которое разрешается с данными для определенного идентификатора после случайно сгенерированной задержки. Внутри функции fetchDataParallel промисы создаются для каждой операции извлечения данных и сохраняются в массиве. Используя Promise.all(), мы ждем разрешения всех промисов и получения данных. Наконец, мы записываем полученные данные для каждого идентификатора в консоль.
Вывод:
Data retrieved for ID 1: Data for ID 1 Data retrieved for ID 2: Data for ID 2 Data retrieved for ID 3: Data for ID 3 Data retrieved for ID 4: Data for ID 4 Data retrieved for ID 5: Data for ID 5
Примечание. Порядок вывода может отличаться из-за случайных задержек.
Фрагмент кода 13:
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const fetchDataWithRetry = async (id, retries = 3) => {
try {
const data = await fetchData(id);
console.log(`Data retrieved for ID ${id}: ${data}`);
} catch (error) {
console.log(`Failed to retrieve data for ID ${id}. Retries left: ${retries}`);
if (retries > 0) {
await delay(1000);
await fetchDataWithRetry(id, retries - 1);
} else {
console.log(`Max retries exceeded for ID ${id}.`);
}
}
};
const fetchData = (id) => {
return new Promise((resolve, reject) => {
// Simulating an asynchronous data retrieval
setTimeout(() => {
if (Math.random() < 0.5) {
resolve(`Data for ID ${id}`);
} else {
reject(new Error(`Failed to retrieve data for ID ${id}`));
}
}, Math.random() * 2000);
});
};
fetchDataWithRetry(1);
Объяснение. В этом фрагменте показано, как получить данные с повторными попытками, используя setTimeout, async/await и обещания. Функция fetchDataWithRetry пытается получить данные для определенного идентификатора. Если во время извлечения возникает ошибка, он отображает количество оставшихся попыток и рекурсивно вызывает сам себя после 1-секундной задержки. Функция fetchData имитирует процесс асинхронного извлечения данных, случайным образом разрешая или отклоняя промис.
Вывод:
Failed to retrieve data for ID 1. Retries left: 3 Failed to retrieve data for ID 1. Retries left: 2 Data retrieved for ID 1: Data for ID 1
Примечание. Порядок вывода может меняться из-за случайных задержек.
Фрагмент кода 14:
const printNumber = (number) => console.log(number);
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number, index) => {
setTimeout(printNumber, index * 1000, number);
});
Объяснение. В этом фрагменте определен массив чисел. Функция printNumber записывает указанный номер в консоль. Используя forEach и setTimeout, мы планируем печать каждого числа с задержкой, основанной на его индексе, начиная с 0 секунд и увеличивая на 1000 миллисекунд для каждого последующего числа.
Вывод:
1 2 3 4 5
Фрагмент кода 15:
const showNotification = () => {
const notification = document.createElement("div");
notification.textContent = "This is a notification!";
document.body.appendChild(notification);
setTimeout(() => {
document.body.removeChild(notification);
}, 3000);
};
showNotification();
Объяснение. В этом фрагменте показано, как создать и удалить элемент уведомления с помощью setTimeout. Функция showNotification создает новый элемент div, задает для его текстового содержимого значение «Это уведомление!», добавляет его к элементу body и планирует его удаление через 3000 миллисекунд (3 секунды) с задержкой, используя setTimeout.
Вывод: уведомление появляется на веб-странице в течение 3 секунд, а затем исчезает.
Краткое содержание:
В этой статье мы рассмотрели пятнадцать различных фрагментов кода, демонстрирующих различные аспекты setTimeout в JavaScript. Эти примеры охватывают отложенные вызовы функций, последовательное и параллельное извлечение данных, повторные попытки, печать чисел с задержками и создание уведомлений. Изучая и применяя эти фрагменты, вы сможете лучше понять, как эффективно использовать setTimeout в различных сценариях программирования.
Освоение setTimeout имеет решающее значение для обработки асинхронных операций и создания отзывчивых приложений. Используя эти фрагменты кода в качестве основы, вы будете хорошо подготовлены к ответам на вопросы интервью, связанным с setTimeout, и продемонстрируете свое мастерство в асинхронном программировании с помощью JavaScript.
Надеюсь, что приведенная выше статья дала лучшее понимание. Если у вас есть какие-либо вопросы относительно областей, которые я обсуждал в этой статье, области улучшения, не стесняйтесь комментировать ниже.
[Раскрытие информации: эта статья является совместным творением, в котором мои собственные идеи сочетаются с помощью ChatGPT для оптимальной артикуляции.]
