Bagaimana cara menunggu 1 detik di JavaScript?

Programming

Oleh Vinci terakhir dimodifikasi pada 18 Oktober 2022.

Tunggu ada semua aspek kehidupan manusia. Mari berfilosofi sejenak! Untuk setiap hal baik dalam hidup, Anda harus menunggu.

Tidak ada yang namanya kegagalan – tunggu saja kesuksesan. – John Osborne

Seperti dalam hidup, menunggu tidak bisa dihindari dalam pemrograman. Ini adalah alat yang Anda perlukan suatu hari nanti dalam situasi putus asa. Misalnya, slider, animasi fade, bola memantul, Anda tidak pernah tahu.

Dalam tutorial ini kita akan belajar bagaimana menunggu satu detik di javascript? Satu detik adalah contohnya. Bisa jadi “5 detik” atau berapa pun waktu yang dibutuhkan kode Anda untuk tidur sebelum melanjutkan operasi.

Untuk mempelajari lebih lanjut tentang PHP sleep, lihat artikel terkait ini.

tunggu

JavaScript Harap tunggu 1 detik

Saya telah menggunakan fungsi setTimeout javascript lama yang bagus untuk menunggu. Menidurkan proses selama durasi yang ditetapkan dalam milidetik. Kemudian ia memanggil fungsi panggilan balik yang diteruskan.

Anda harus meletakkan kode untuk dijalankan setelah menunggu di dalam panggilan fungsi ini. Sekitar 1000ms waktu tunggu adalah satu detik. Jika Anda ingin menunggu 5 detik, lewati 5000.

Kode ini akan berguna jika Anda membuat ticker berita seperti animasi bergulir.

	var testWait = function(milliseconds) {
		console.log('Before wait');
		setTimeout(function() {
			console.log('After wait');
		}, milliseconds);
	}

	testWait(1000);

JavaScript Tunggu 1 detik untuk janji

Jika Anda menggunakan browser modern, Anda dapat menggunakan kode di bawah ini. Dalam pengertian modern, browser Anda harus mendukung standar JavaScript ES6.

Singkatnya, Anda memerlukan dukungan JavaScript Promise. Di sini kita menggunakan fungsi setTimeout. Setelah menunggu milidetik yang ditentukan, itu menyelesaikan janji.

// Promise is available with JavaScript ES6 standard
// Need latest browsers to run it
const wait = async (milliseconds) => {
    await new Promise(resolve => {
        return setTimeout(resolve, milliseconds)
    });
};

const testWait = async () => {
    console.log('Before wait.');
    await wait(1000);
    console.log('After wait.');
}

testWait();

JavaScript menunggu 1 detik dalam lingkaran

Jika Anda ingin menunggu pemrosesan dalam satu lingkaran di JavaScript, gunakan kode berikut. Ia menggunakan fungsi Promise di atas dan setTimeout untuk mencapai waktu tunggu.

Jika browser Anda sudah tua, gunakan kode pertama yang diberikan di atas untuk bagian menunggu. Jika Anda perlu menggunakannya, ingatlah untuk membaca bagian terakhir dari tutorial ini. Khususnya, jika Anda ingin “menunggu” dalam aplikasi JavaScript yang penting.

const wait = async (milliseconds) => {
    await new Promise(resolve => {
        return setTimeout(resolve, milliseconds)
    });
};

const waitInLoop = async () => {
    for (let i = 0; i < 10; i++) {
        console.log('Waiting ...');    	
        await wait(1000);
        console.log(i);
    }
    console.log("The wait is over.");
}

waitInLoop();

JavaScript Tunggu 1 detik di jQuery

Ini untuk orang yang ingin menulis semuanya di jQuery. Dulunya merupakan salah satu perpustakaan JavaScript front-end terbesar tetapi telah kehilangan popularitasnya saat ini. Bereaksi adalah anak baru di blok itu. Di sini, dalam skenario menunggu ini, bahkan jika Anda berada di lingkungan jQuery, tidak perlu mencari kode khusus jQuery.

Karena Anda akan mendukung JavaScript. Anda dapat menggunakan setTimeout tanpa konstruksi jQuery khusus. Saya telah menempatkan setTimeout dalam kode gaya jQuery. Anggur lama dalam botol baru.

// if for some strange reason you want to write
	// it in jQuery style
	// just wrapping the setTimout function in jQuery style

	$.wait = function(callback, milliseconds) {
		return window.setTimeout(callback, milliseconds);
	}

	$.wait(function() {
		$("#onDiv").slideUp()
	}, 1000);

Batalkan sebelum Anda menunggu fungsi selesai

Anda mungkin harus membatalkan menunggu dan memulai ulang setTimeout dalam skenario tertentu. Dalam situasi seperti itu, gunakan fungsi clearTimeout() seperti di bawah ini. Untuk mempelajari tentang skenario menunggu tertentu, tinjau bagian berikutnya.

let timeoutId = setTimeout(() => {
	   // do process 
	})
	// store the timeout id and call clearTimeout() function
	// to clear the already set timeout
	clearTimeout(timeoutId);

Apakah harapan itu realistis?

Anda perlu memahami apa yang diharapkan JavaScript. Saat mesin JavaScript memanggil setTimeout, mesin tersebut memproses sebuah fungsi. Saat fungsi keluar, batas waktu diatur dengan milidetik yang ditentukan. Setelah menunggu ini, mesin JavaScript melakukan panggilan balik.

Bila Anda ingin mengetahui total masa tunggu untuk panggilan berturut-turut berikutnya. Anda harus menambahkan waktu pemrosesan fungsi Anda ke waktu tunggu.

Oleh karena itu, ini adalah unit variabel. Misalkan fungsi ini berjalan selama lima detik. Dan waktu tunggu setTimeout adalah satu detik. Maka waktu tunggu yang sebenarnya untuk panggilan berikutnya adalah enam detik.

Jika Anda ingin menelepon tepat setiap lima detik, Anda perlu menentukan pengatur waktu setTimeout.

Anda perlu mempertimbangkan waktu yang dibutuhkan untuk pemrosesan, lalu kurangi waktu tunggu dari milidetik. Kemudian timpa setTimeout saat ini. dan mulai setTimeout baru dengan waktu terhitung yang baru.

Ini akan sulit. Jika Anda menjalankan panggilan tahan misi-kritis, ini adalah solusinya.

Misalnya, animasi UI generik akan menjadi implementasi dasar yang baik di atas. Tetapi untuk acara kritis waktu, Anda memerlukan pengatur waktu setTimeout yang dapat diatur sendiri.

setInterval lebih dekat untuk skenario di atas. Proses UI lain yang berjalan di utas utama akan memengaruhi periode tunggu setInterval. Kemudian penantian satu detik Anda dapat berubah menjadi penantian 5 detik. Oleh karena itu, Anda harus mengatur self-tuning untuk acara mission-critical.

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *