JavaScript의 `setTimeout` 및 `setInterval` 마스터하기

분주한 JavaScript 세계에서는 시간 관리가 핵심입니다. 동적 웹 애플리케이션을 개발 중이고 특정 기간 후에 함수를 실행해야 하거나 지정된 간격으로 함수를 반복적으로 실행해야 한다고 가정해 보겠습니다. 여기서 setTimeout과 setInterval이 작동합니다. 이 두 가지 기능을 통해 개발자는 코드 실행 타이밍을 제어할 수 있으므로 웹 애플리케이션의 대화형 및 응답성이 향상됩니다. 이 블로그에서는 setTimeout 및 setInterval에 대해 자세히 알아보고 흥미로운 예제를 통해 사용법을 살펴보고 async/await를 사용하는 방법에 대해 논의합니다.

setTimeout의 기본

setTimeout이란 무엇입니까?

setTimeout은 타이머가 만료되면 함수 또는 지정된 코드를 실행하는 타이머를 설정하는 JavaScript 함수입니다. 비동기 작업을 관리하기 위한 기본 도구입니다.

setTimeout 구문

setTimeout(function, delay, arg1, arg2, ...);

• function: 타이머가 만료된 후 실행될 함수입니다.
• 지연: 함수가 실행되기 전의 시간(밀리초).
• arg1, arg2, ...: 함수에 전달되는 추가 인수입니다.

예: 간단한 setTimeout

간단한 예부터 시작해 보겠습니다. 요리를 하고 있는데 5초 후에 오븐을 확인하라는 알림이 필요하다고 상상해 보세요.

function checkOven() {
    console.log("Time to check the oven!");
}

setTimeout(checkOven, 5000); // 5000 milliseconds = 5 seconds

이 예에서는 checkOven 함수가 5초 후에 한 번 실행됩니다.

setInterval의 기본

setInterval이란 무엇입니까?

setInterval은 각 호출 사이에 고정된 시간 지연을 두고 함수나 지정된 코드를 반복적으로 실행하는 타이머를 설정하는 JavaScript 함수입니다.

setInterval의 구문

setInterval(function, delay, arg1, arg2, ...);

• function : 반복적으로 실행되는 함수입니다.
• 지연: 각 함수 실행 사이의 시간(밀리초).
• arg1, arg2, ...: 함수에 전달되는 추가 인수입니다.

예: 간단한 setInterval

요리 시나리오를 강화해 보겠습니다. 2초마다 수프를 저어줘야 한다고 가정해 보세요.

function stirSoup() {
    console.log("Stirring the soup...");
}

setInterval(stirSoup, 2000); // 2000 milliseconds = 2 seconds

이 예에서는 StirSoup 함수가 2초마다 실행됩니다.

타이머 지우기

클리어타임아웃

setTimeout 실행을 중지하려면clearTimeout을 사용하세요.

let timerId = setTimeout(checkOven, 5000);

// Cancel the timer
clearTimeout(timerId);

클리어간격

setInterval의 반복을 중지하려면 clearInterval을 사용하세요.

let intervalId = setInterval(stirSoup, 2000);

// Cancel the interval
clearInterval(intervalId);

예제를 통한 고급 사용법

함수에 인수 전달

setTimeout과 setInterval은 모두 실행 중인 함수에 인수를 전달할 수 있습니다.

function greet(name) {
    console.log(`Hello, ${name}!`);
}

setTimeout(greet, 3000, "Alice"); // Outputs "Hello, Alice!" after 3 seconds

반복 작업에 대한 중첩된 setTimeout

setInterval을 사용하는 대신 중첩된 setTimeout을 사용하여 반복 작업을 보다 정확하게 제어할 수 있습니다.

function fetchData() {
    console.log("Fetching data...");

    setTimeout(fetchData, 2000); // Recursively call fetchData every 2 seconds
}

fetchData();

이야기: 디지털 주방 타이머

디지털 주방 타이머 앱을 구축한다고 상상해 보세요. 사용자는 다양한 요리 작업에 대해 여러 타이머를 설정할 수 있습니다. setTimeout 및 setInterval을 사용하면 이러한 타이머를 효율적으로 관리할 수 있습니다.

class KitchenTimer {
    constructor() {
        this.timers = [];
    }

    addTimer(name, duration) {
        let timerId = setTimeout(() => {
            console.log(`${name} timer done!`);
            this.removeTimer(timerId);
        }, duration);

        this.timers.push({ name, timerId });
        console.log(`${name} timer set for ${duration / 1000} seconds.`);
    }

    removeTimer(timerId) {
        this.timers = this.timers.filter(timer => timer.timerId !== timerId);
    }

    clearAllTimers() {
        this.timers.forEach(timer => clearTimeout(timer.timerId));
        this.timers = [];
        console.log("All timers cleared.");
    }
}

let myKitchen = new KitchenTimer();
myKitchen.addTimer("Pasta", 5000);
myKitchen.addTimer("Cake", 10000);

setTimeout(() => {
    myKitchen.clearAllTimers();
}, 8000); // Clear all timers after 8 seconds

setTimeout으로 비동기 및 대기 사용

setTimeout은 Promise 기반 함수는 아니지만 Promise로 래핑하여 async 및 Wait와 함께 사용할 수 있습니다.

예: Promise로 setTimeout 래핑

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncTask() {
    console.log("Task started...");
    await delay(2000);
    console.log("Task completed after 2 seconds.");
}

asyncTask();

이 예에서 지연 함수는 지정된 지연 후에 해결되는 약속을 반환합니다. asyncTask 함수는 약속이 해결될 때까지 실행을 일시 중지하기 위해 대기를 사용합니다.

setInterval과 함께 비동기 및 대기 사용

async 및 wait로 setInterval을 처리하는 것은 지연을 반복적으로 기다리는 방법이 필요하기 때문에 더 복잡합니다.

예: async 및 wait를 사용하여 setInterval 시뮬레이션

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncIntervalTask() {
    while (true) {
        console.log("Interval task executing...");
        await delay(2000);
    }
}

asyncIntervalTask();

이 예에서 asyncIntervalTask ​​함수는 지연 함수에 대한 대기와 함께 while 루프를 사용하여 반복 작업을 시뮬레이션합니다.

결론

setTimeout 및 setInterval을 이해하고 숙달하는 것은 JavaScript 개발자에게 매우 중요합니다. 이러한 기능은 애플리케이션에서 타이밍 및 비동기 작업을 관리하는 강력한 방법을 제공합니다. 해당 기능을 활용하면 보다 대화형이고 동적인 웹 경험을 만들 수 있습니다. 또한 이를 async 및 Wait와 통합하면 비동기 코드를 더욱 효과적으로 제어하고 명확하게 할 수 있습니다.

디지털 주방 타이머를 구축하든, 정확한 타이밍이 필요한 기타 애플리케이션을 구축하든, setTimeout 및 setInterval은 JavaScript 툴킷의 필수 도구입니다. 즐거운 코딩하세요!

위 내용은 JavaScript의 `setTimeout` 및 `setInterval` 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!