Jalankan skrip setelah penundaan tertentu menggunakan JavaScript

Apakah ada metode JavaScript yang mirip dengan jQuery delay()atau wait()(untuk menunda eksekusi skrip untuk jangka waktu tertentu)?

Ada yang berikut ini:

setTimeout(function, milliseconds);

fungsi yang dapat dilewati waktu setelah fungsi akan dieksekusi.

Lihat: Metode JendelasetTimeout() .

Hanya untuk menambahkan apa yang dikatakan orang lain tentang setTimeout: Jika Anda ingin memanggil fungsi dengan parameter di masa depan, Anda perlu mengatur beberapa panggilan fungsi anonim.

Anda harus melewati fungsi sebagai argumen untuk dipanggil nanti. Akibatnya ini berarti tanpa tanda kurung di belakang nama. Berikut ini akan memanggil lansiran sekaligus, dan itu akan menampilkan 'Halo dunia':

var a = "world";
setTimeout(alert("Hello " + a), 2000);

Untuk memperbaikinya, Anda dapat meletakkan nama fungsi (seperti yang dilakukan Flubba) atau Anda dapat menggunakan fungsi anonim. Jika Anda harus melewati parameter, maka Anda harus menggunakan fungsi anonim.

var a = "world";
setTimeout(function(){alert("Hello " + a)}, 2000);
a = "Stack Overflow";

Tetapi jika Anda menjalankan kode itu, Anda akan melihat bahwa setelah 2 detik popup akan mengatakan 'Hello Stack Overflow'. Ini karena nilai variabel a telah berubah dalam dua detik tersebut. Untuk membuatnya mengatakan 'Halo dunia' setelah dua detik, Anda perlu menggunakan cuplikan kode berikut:

function callback(a){
    return function(){
        alert("Hello " + a);
    }
}
var a = "world";
setTimeout(callback(a), 2000);
a = "Stack Overflow";

Ini akan menunggu 2 detik dan kemudian muncul 'Hello world'.

Hanya untuk sedikit memperluas ... Anda dapat mengeksekusi kode secara langsung dalam setTimeoutpanggilan, tetapi seperti yang dikatakan @patrick , Anda biasanya menetapkan fungsi panggilan balik, seperti ini. Waktunya milidetik

setTimeout(func, 4000);
function func() {
    alert('Do stuff here');
}

Jika Anda benar-benar ingin memiliki fungsi pemblokiran (sinkron) delay(untuk apa pun), mengapa tidak melakukan sesuatu seperti ini:

<script type="text/javascript">
    function delay(ms) {
        var cur_d = new Date();
        var cur_ticks = cur_d.getTime();
        var ms_passed = 0;
        while(ms_passed < ms) {
            var d = new Date();  // Possible memory leak?
            var ticks = d.getTime();
            ms_passed = ticks - cur_ticks;
            // d = null;  // Prevent memory leak?
        }
    }

    alert("2 sec delay")
    delay(2000);
    alert("done ... 500 ms delay")
    delay(500);
    alert("done");
</script>

Anda perlu menggunakan setTimeout dan memberikannya fungsi panggilan balik. Alasan Anda tidak dapat menggunakan sleep dalam javascript adalah karena Anda akan memblokir seluruh halaman dari melakukan sesuatu sementara itu. Bukan rencana yang bagus. Gunakan model acara Javascript dan tetap senang. Jangan melawannya!

Anda juga dapat menggunakan window.setInterval () untuk menjalankan beberapa kode berulang kali pada interval reguler.

Untuk menambahkan komentar sebelumnya, saya ingin mengatakan yang berikut:

The setTimeout()fungsi dalam JavaScript tidak berhenti eksekusi script per se, tetapi hanya memberitahu compiler untuk menjalankan suatu kode di masa depan.

Tidak ada fungsi yang benar-benar dapat menghentikan sementara eksekusi ke dalam JavaScript. Namun, Anda dapat menulis fungsi Anda sendiri yang melakukan sesuatu seperti loop tanpa syarat hingga waktu tercapai dengan menggunakan Date()fungsi dan menambahkan interval waktu yang Anda butuhkan.

Jika Anda hanya perlu menguji penundaan, Anda dapat menggunakan ini:

function delay(ms) {
   ms += new Date().getTime();
   while (new Date() < ms){}
}

Dan kemudian jika Anda ingin menunda selama 2 detik Anda lakukan:

delay(2000);

Mungkin bukan yang terbaik untuk produksi. Lebih lanjut tentang itu di komentar

mengapa Anda tidak bisa meletakkan kode di belakang janji? (diketik di bagian atas kepala saya)

new Promise(function(resolve, reject) {
  setTimeout(resolve, 2000);
}).then(function() {
  console.log('do whatever you wanted to hold off on');
});

Jawaban sederhana adalah:

setTimeout(
    function () {
        x = 1;
    }, 1000);

Fungsi di atas menunggu 1 detik (1000 ms) kemudian menetapkan x ke 1. Jelas ini adalah contoh; Anda dapat melakukan apa pun yang Anda inginkan di dalam fungsi anonim.

Saya benar-benar menyukai penjelasan Maurius (respons terunggul tertinggi) dengan tiga metode berbeda untuk menelepon setTimeout.

Dalam kode saya, saya ingin secara otomatis menavigasi ke halaman sebelumnya setelah menyelesaikan acara penyimpanan AJAX. Penyelesaian acara simpan memiliki sedikit animasi di CSS yang menunjukkan bahwa penyimpanan berhasil.

Dalam kode saya, saya menemukan perbedaan antara dua contoh pertama:

setTimeout(window.history.back(), 3000);

Yang ini tidak menunggu batas waktu - bagian belakang () dipanggil segera tidak peduli berapa pun nomor yang saya tunda.

Namun, ubah ini menjadi:

setTimeout(function() {window.history.back()}, 3000);

Ini tepat seperti yang saya harapkan.

Ini tidak spesifik untuk operasi back (), sama terjadi dengan alert(). Pada dasarnya dengan yang alert()digunakan dalam kasus pertama, waktu tunda diabaikan. Ketika saya mengabaikan popup, animasi untuk CSS berlanjut.

Jadi, saya akan merekomendasikan metode kedua atau ketiga yang ia gambarkan bahkan jika Anda menggunakan fungsi bawaan dan tidak menggunakan argumen.

Saya punya beberapa perintah ajax yang ingin saya jalankan dengan penundaan di antaranya. Berikut adalah contoh sederhana dari satu cara untuk melakukan itu. Saya siap untuk dicabik-cabik karena pendekatan saya yang tidak konvensional. :)

//  Show current seconds and milliseconds
//  (I know there are other ways, I was aiming for minimal code
//  and fixed width.)
function secs()
{
    var s = Date.now() + ""; s = s.substr(s.length - 5);
  return s.substr(0, 2) + "." + s.substr(2);
}

//  Log we're loading
console.log("Loading: " + secs());

//  Create a list of commands to execute
var cmds = 
[
    function() { console.log("A: " + secs()); },
    function() { console.log("B: " + secs()); },
    function() { console.log("C: " + secs()); },
    function() { console.log("D: " + secs()); },
    function() { console.log("E: " + secs()); },
  function() { console.log("done: " + secs()); }
];

//  Run each command with a second delay in between
var ms = 1000;
cmds.forEach(function(cmd, i)
{
    setTimeout(cmd, ms * i);
});

// Log we've loaded (probably logged before first command)
console.log("Loaded: " + secs());

Anda dapat menyalin blok kode dan menempelkannya ke jendela konsol dan melihat sesuatu seperti:

Loading: 03.077
Loaded: 03.078
A: 03.079
B: 04.075
C: 05.075
D: 06.075
E: 07.076
done: 08.076

Solusi paling sederhana untuk memanggil fungsi Anda dengan penundaan adalah:

function executeWithDelay(anotherFunction) {
    setTimeout(anotherFunction, delayInMilliseconds);
}

fungsi penundaan:

/**
 * delay or pause for some time
 * @param {number} t - time (ms)
 * @return {Promise<*>}
 */
const delay = async t => new Promise(resolve => setTimeout(resolve, t));

penggunaan di dalam asyncfungsi:

await delay(1000);

Seperti yang lain katakan, setTimeout adalah taruhan Anda yang paling aman.
Tetapi kadang-kadang Anda tidak dapat memisahkan logika dengan fungsi baru maka Anda dapat menggunakan Date.now () untuk mendapatkan milidetik dan melakukan penundaan sendiri ....

function delay(milisecondDelay) {
   milisecondDelay += Date.now();
   while(Date.now() < milisecondDelay){}
}

alert('Ill be back in 5 sec after you click OK....');
delay(5000);
alert('# Im back # date:' +new Date());