Menguasai `setTimeout` dan `setInterval` dalam JavaScript

Dalam dunia JavaScript yang sibuk, pengurusan masa adalah kunci. Bayangkan anda sedang membangunkan aplikasi web dinamik, dan anda perlu melaksanakan fungsi selepas tempoh tertentu, atau menjalankan fungsi berulang kali pada selang waktu tertentu. Di sinilah setTimeout dan setInterval dimainkan. Kedua-dua fungsi ini membolehkan pembangun mengawal masa pelaksanaan kod mereka, menjadikan aplikasi web lebih interaktif dan responsif. Dalam blog ini, kita akan mendalami setTimeout dan setInterval, meneroka penggunaannya melalui contoh yang menarik dan membincangkan cara menggunakan async/menunggu dengan mereka.

Asas setTimeout

Apakah setTimeout?

setTimeout ialah fungsi JavaScript yang menetapkan pemasa yang melaksanakan fungsi atau sekeping kod yang ditentukan sebaik pemasa tamat tempoh. Ia merupakan alat asas untuk mengurus operasi tak segerak.

Sintaks setTimeout

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

• fungsi: Fungsi yang akan dilaksanakan selepas pemasa tamat tempoh.
• kelewatan: Masa dalam milisaat sebelum fungsi dilaksanakan.
• arg1, arg2, ...: Argumen tambahan dihantar ke fungsi.

Contoh: Set MudahMasa tamat

Mari kita mulakan dengan contoh mudah. Bayangkan anda sedang memasak dan memerlukan peringatan untuk memeriksa ketuhar dalam masa 5 saat.

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

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

Dalam contoh ini, fungsi checkOven akan dilaksanakan sekali selepas 5 saat.

Asas setInterval

Apakah setInterval?

setInterval ialah fungsi JavaScript yang menetapkan pemasa yang melaksanakan fungsi atau sekeping kod yang ditentukan berulang kali, dengan kelewatan masa tetap antara setiap panggilan.

Sintaks setInterval

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

• fungsi: Fungsi yang akan dilaksanakan berulang kali.
• kelewatan: Masa dalam milisaat antara setiap pelaksanaan fungsi.
• arg1, arg2, ...: Argumen tambahan dihantar ke fungsi.

Contoh: Set Interval mudah

Mari tingkatkan senario masakan kita. Katakan anda perlu mengacau sup setiap 2 saat.

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

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

Dalam contoh ini, fungsi stirSoup akan dilaksanakan setiap 2 saat.

Membersihkan Pemasa

clearTimeout

Untuk menghentikan setTimeout daripada melaksanakan, gunakan clearTimeout.

let timerId = setTimeout(checkOven, 5000);

// Cancel the timer
clearTimeout(timerId);

clearInterval

Untuk menghentikan setInterval daripada berulang, gunakan clearInterval.

let intervalId = setInterval(stirSoup, 2000);

// Cancel the interval
clearInterval(intervalId);

Penggunaan Lanjutan dengan Contoh

Menghantar Hujah kepada Fungsi

Kedua-dua setTimeout dan setInterval boleh menghantar argumen kepada fungsi yang sedang dilaksanakan.

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

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

Nested setTimeout untuk Tugasan Berulang

Daripada menggunakan setInterval, anda boleh menggunakan setTimeout bersarang untuk kawalan yang lebih tepat ke atas tugasan berulang.

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

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

fetchData();

Cerita: Pemasa Dapur Digital

Bayangkan anda sedang membina apl pemasa dapur digital. Pengguna boleh menetapkan berbilang pemasa untuk tugas memasak yang berbeza. Menggunakan setTimeout dan setInterval, anda boleh mengurus pemasa ini dengan cekap.

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

Menggunakan async dan tunggu dengan setTimeout

Walaupun setTimeout bukan fungsi berasaskan janji, anda boleh menggunakannya dengan async dan menunggu dengan membungkusnya dalam janji.

Contoh: Membungkus setTimeout dalam Janji

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();

Dalam contoh ini, fungsi kelewatan mengembalikan janji yang diselesaikan selepas kelewatan yang ditentukan. Fungsi asyncTask menggunakan await untuk menjeda pelaksanaan sehingga janji diselesaikan.

Menggunakan async dan tunggu dengan setInterval

Mengendalikan setInterval dengan async dan menunggu adalah lebih kompleks, kerana ia memerlukan cara untuk berulang kali menunggu kelewatan.

Contoh: Mensimulasikan setInterval dengan async dan menunggu

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

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

asyncIntervalTask();

Dalam contoh ini, fungsi asyncIntervalTask ​​mensimulasikan tugasan berulang dengan menggunakan gelung sementara dengan menunggu pada fungsi kelewatan.

Kesimpulan

Memahami dan menguasai setTimeout dan setInterval adalah penting untuk mana-mana pembangun JavaScript. Fungsi ini menyediakan cara yang berkuasa untuk mengurus masa dan operasi tak segerak dalam aplikasi anda. Dengan memanfaatkan keupayaan mereka, anda boleh mencipta pengalaman web yang lebih interaktif dan dinamik. Selain itu, dengan menyepadukannya dengan tak segerak dan menunggu, anda boleh mencapai lebih banyak kawalan dan kejelasan dalam kod tak segerak anda.

Sama ada anda sedang membina pemasa dapur digital atau sebarang aplikasi lain yang memerlukan pemasaan yang tepat, setTimeout dan setInterval ialah alatan penting dalam kit alat JavaScript anda. Selamat mengekod!

Atas ialah kandungan terperinci Menguasai `setTimeout` dan `setInterval` dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!