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 в рамките на цикъл, ние извличаме данни за пет различни ID с произволни закъснения.
Изход:
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 за оптимална артикулация.]
