Memahami `setTimeout` dan `setInterval` dalam JavaScript

JavaScript menyediakan beberapa cara untuk mengendalikan acara pemasaan, dan dua daripada kaedah yang paling biasa digunakan ialah setTimeout dan setInterval. Fungsi ini membolehkan anda menjadualkan pelaksanaan kod selepas tempoh masa tertentu atau berulang kali pada selang masa yang tetap. Dalam artikel ini, kami akan meneroka cara fungsi ini berfungsi dan memberikan contoh praktikal untuk menggambarkan penggunaannya.

setTimeout

Fungsi setTimeout digunakan untuk melaksanakan fungsi atau sekeping kod sekali selepas kelewatan yang ditentukan. Sintaks untuk setTimeout adalah seperti berikut:

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

• fungsi: Fungsi atau kod untuk dilaksanakan.
• kelewatan: Masa dalam milisaat untuk menunggu sebelum melaksanakan fungsi.
• [arg1, arg2, ...]: Argumen pilihan untuk dihantar ke fungsi apabila ia dilaksanakan.

Contoh 1: Penggunaan Asas

function sayHello() {
  console.log('Hello, World!');
}

setTimeout(sayHello, 2000); // Outputs "Hello, World!" after 2 seconds

Dalam contoh ini, fungsi sayHello dilaksanakan sekali selepas kelewatan 2 saat.

Contoh 2: Melepasi Hujah

function greet(name) {
  console.log('Hello, ' + name + '!');
}

setTimeout(greet, 2000, 'Alice'); // Outputs "Hello, Alice!" after 2 seconds

Di sini, kami menyampaikan hujah 'Alice' kepada fungsi salam, yang dilaksanakan selepas kelewatan 2 saat.

Contoh 3: Menggunakan Fungsi Tanpa Nama

setTimeout(function() {
  console.log('This is an anonymous function!');
}, 3000); // Outputs "This is an anonymous function!" after 3 seconds

Anda juga boleh menggunakan fungsi tanpa nama terus dalam setTimeout.

setInterval

Fungsi setInterval digunakan untuk melaksanakan fungsi atau sekeping kod berulang kali pada selang waktu tertentu. Sintaks untuk setInterval adalah serupa dengan setTimeout:

setInterval(function, interval, [arg1, arg2, ...]);

• fungsi: Fungsi atau kod untuk dilaksanakan.
• selang: Masa dalam milisaat antara setiap pelaksanaan.
• [arg1, arg2, ...]: Argumen pilihan untuk dihantar ke fungsi setiap kali ia dilaksanakan.

Contoh 1: Penggunaan Asas

function sayHello() {
  console.log('Hello, World!');
}

setInterval(sayHello, 1000); // Outputs "Hello, World!" every 1 second

Dalam contoh ini, fungsi sayHello dilaksanakan setiap saat.

Contoh 2: Melepasi Hujah

function greet(name) {
  console.log('Hello, ' + name + '!');
}

setInterval(greet, 1000, 'Alice'); // Outputs "Hello, Alice!" every 1 second

Di sini, kami menyampaikan hujah 'Alice' kepada fungsi salam, yang dilaksanakan setiap saat.

Contoh 3: Menggunakan Fungsi Tanpa Nama

setInterval(function() {
  console.log('This is an anonymous function!');
}, 2000); // Outputs "This is an anonymous function!" every 2 seconds

Anda boleh menggunakan fungsi tanpa nama terus dalam setInterval juga.

Membersihkan Pemasa

Kedua-dua setTimeout dan setInterval mengembalikan ID pemasa, yang boleh digunakan untuk mengosongkan pemasa jika perlu. Ini dilakukan menggunakan fungsi clearTimeout dan clearInterval, masing-masing.

Contoh: Kosongkan setTimeout

const timeoutId = setTimeout(function() {
  console.log('This will not run.');
}, 5000);

clearTimeout(timeoutId); // Cancels the timeout

Contoh: Clearing setInterval

const intervalId = setInterval(function() {
  console.log('This will run only once.');
}, 1000);

setTimeout(function() {
  clearInterval(intervalId); // Stops the interval after 3 seconds
}, 3000);

Dalam contoh ini, fungsi clearInterval dipanggil selepas 3 saat, menghentikan pelaksanaan berulang fungsi.

Kes Penggunaan Praktikal

1. Menyahlantun dengan setTimeout

Menyahlantun ialah teknik untuk mengehadkan kadar sesuatu fungsi dilaksanakan. Contohnya, anda boleh menggunakan setTimeout untuk nyahpantun medan input carian:

let timeoutId;

function debounceSearch(query) {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(function() {
    // Perform search operation
    console.log('Searching for:', query);
  }, 300);
}

document.getElementById('searchInput').addEventListener('input', function(event) {
  debounceSearch(event.target.value);
});

2. Mencipta Pemasa Mudah dengan setInterval

let seconds = 0;

function updateTimer() {
  seconds++;
  console.log('Timer:', seconds);
}

const timerId = setInterval(updateTimer, 1000);

// Stop the timer after 10 seconds
setTimeout(function() {
  clearInterval(timerId);
  console.log('Timer stopped');
}, 10000);

Kesimpulan

Memahami setTimeout dan setInterval adalah penting untuk mengurus tindakan bermasa dan berulang dalam JavaScript. Fungsi ini membolehkan anda mengendalikan tugas seperti menyahlantun input pengguna, mencipta pemasa dan menjalankan kemas kini berkala. Dengan menguasai alatan ini, anda boleh membina aplikasi web yang lebih responsif dan cekap.

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