jQuery: Tunggu / Tunda 1 detik tanpa mengeksekusi kode

129

Saya tidak bisa menjalankan .delaymetode di jQuery:

$.delay(3000); // not working
$(queue).delay(3000); // not working

Saya menggunakan loop sementara untuk menunggu sampai nilai perubahan yang tidak terkontrol lebih besar dari atau sama dengan yang lain dan saya tidak dapat menemukan cara untuk menghambat eksekusi selama X detik.

javascript jquery delay wait seconds Brian Graham
sumber
coba gunakan setTimeout di callback
theshadowmonkey
versi jquery apa yang Anda gunakan?
L7ColWinters
1
itu bukan tujuan dari fungsi penundaan, itu dirancang untuk digunakan di antara peristiwa jquery yang antri (seperti fade (). delay (). show ()). Anda memerlukan fungsi setTimeOut.
JoJa
@ Jojo: Anda benar pada poin utama, namun tidak ada bentuk argumen show (dan sembunyikan) tidak menggunakan efek antrian.
Jay Tomten
3
Tolong, sebutkan apa yang ingin Anda capai dengan penundaan itu. Semua JavaScript dieksekusi pada utas tunggal, dan membekukannya selama X detik dapat menyebabkan pengalaman pengguna yang merugikan.
Dmitry Shkuropatsky

Jawaban:

176

$ .delay digunakan untuk menunda animasi dalam antrian, bukan menghentikan eksekusi.

Alih-alih menggunakan loop sementara, Anda perlu memanggil metode yang melakukan pemeriksaan setiap detik menggunakan setTimeout:

var check = function(){
    if(condition){
        // run when condition is met
    }
    else {
        setTimeout(check, 1000); // check again in a second
    }
}

check();
Justin Niessner
sumber
1
Saya pikir, setTimeout sudah cukup.
Jiemurat
3
Anda saudaranya, inilah yang saya butuhkan untuk memperbaiki kode saya.
jemiloii
@Jiemurat dan siapa pun di masa depan: setTimeout tidak memutus alur eksekusi. Kode hebat Niessner memperoleh ini sampai kondisi menjadi benar!
Gabrer
Jika Anda tidak perlu memutus aliran eksekusi, Anda bisa menggunakannya setTimeout().
Joshua Pinter
saya selalu mendapatkan "periksa bukan fungsi", fungsi cek saya memiliki dua parameter
Black
210

Anda juga dapat menunda beberapa operasi dengan cara ini:

setTimeout(function (){

  // Something you want delayed.

}, 5000); // How long do you want the delay to be (in milliseconds)?
Matt Sich
sumber
7
Hanya FYI, ini tidak menghentikan aliran eksekusi, jadi jika Anda perlu "menghentikan semuanya" selama beberapa detik, Anda akan membutuhkan sesuatu seperti yang diposting oleh Niessner.
Joshua Pinter
Ya ... ini adalah panggilan balik ke fungsi dan tidak memblokir. Terima kasih atas jawabannya, itu memperbaiki masalah saya.
Bertus Kruger
jika frekuensinya sangat singkat dan kami berharap fungsi ini akan berjalan selamanya, apakah akhirnya akan menumpuk?
Suicide Bunny
16

EST setTimeout

setTimeout(() => {
  console.log("we waited 204586560000 ms to run this code, oh boy wowwoowee!");
}, 204586560000);

Sunting: 204586560000 ms adalah perkiraan waktu antara pertanyaan awal dan jawaban ini ... dengan asumsi saya menghitung dengan benar.

mantra
sumber
2
benar-benar baik menggunakan perkiraan waktu dari pertanyaan awal hingga jawaban ini
Fuzzybear
9

delayFungsi jQuery dimaksudkan untuk digunakan dengan efek dan efek antrian, lihat delaydokumen dan contoh di dalamnya:

$('#foo').slideUp(300).delay(800).fadeIn(400);

Jika Anda ingin mengamati variabel untuk perubahan, Anda bisa melakukan sesuatu seperti

(function() {
    var observerInterval = setInterval(function() {
        if (/* check for changes here */) {
           clearInterval(observerInterval);
           // do something here
        }
    }, 1000);
})();
Julian D.
sumber
setInterval memiliki parameter wajib kedua, waktu dalam milidetik;)
sara_thepot
1
Terima kasih @ sara.potyscki, sudah diperbaiki.
Julian D.
@JulianD. Terima kasih atas saran ini. Saya mendapat pertanyaan ini sambil mencari solusi. Inilah yang saya butuhkan untuk proyek saya.
Cheryl Velez
8

JavaScript setTimeoutadalah solusi yang sangat baik:

function funcx()
   {
   // your code here
   // break out here if needed
   setTimeout(funcx, 3000);
   }

funcx();

The delayfungsi dalam jQuery sebagian besar digunakan untuk menunda animasi dalam antrian animasi jQuery.

Jay Tomten
sumber
5

delay()tidak menghentikan aliran kode lalu menjalankannya kembali. Tidak ada cara praktis untuk melakukannya dalam JavaScript. Semuanya harus dilakukan dengan fungsi yang menerima panggilan balik seperti setTimeoutyang disebutkan orang lain.

Tujuan dari jQuery delay()adalah untuk membuat antrian animasi menunggu sebelum dieksekusi. Jadi misalnya $(element).delay(3000).fadeIn(250);akan membuat elemen memudar setelah 3 detik.

Nathan MacInnes
sumber
5

Hanya javascript Ini akan berfungsi tanpa jQuery 

<!DOCTYPE html>
<html>
    <head>
        <script>
            function sleep(miliseconds) {
                var currentTime = new Date().getTime();
                while (currentTime + miliseconds >= new Date().getTime()) {
                }
            }

            function hello() {
                sleep(5000);
                alert('Hello');
            }
            function hi() {
                sleep(10000);
                alert('Hi');
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="hello();">Say me hello after 5 seconds </a>
        <br>
        <a href="#" onclick="hi();">Say me hi after 10 seconds </a>


    </body>
</html>
Faruk Omar
sumber
1
Looping untuk menunggu di javascript adalah ide yang buruk! Semua fungsionalitas javascript akan berhenti saat loop sedang berjalan. Ini akan memiliki efek samping yang tidak terduga. Jauh lebih baik menggunakan fungsi yang tidak menghalangi seperti setTimeout ().
Kevin G.
4

Javascript adalah bahasa pemrograman yang tidak sinkron sehingga Anda tidak dapat menghentikan eksekusi untuk sementara waktu; satu-satunya cara Anda dapat [pseudo] menghentikan eksekusi menggunakan setTimeout () yang bukan penundaan tetapi "fungsi panggilan balik tertunda".

Fabio Buda
sumber
2

Jika Anda menggunakan fitur ES6 dan Anda berada dalam fungsi async, Anda dapat secara efektif menghentikan eksekusi kode untuk waktu tertentu dengan fungsi ini:

const delay = millis => new Promise((resolve, reject) => {
  setTimeout(_ => resolve(), millis)
});

Ini adalah bagaimana Anda menggunakannya:

await delay(5000);

Ini akan berhenti untuk jumlah milidetik yang diminta, tetapi hanya jika Anda berada dalam fungsi async . Contoh di bawah ini:

const myFunction = async function() {
  // first code block ...

  await delay(5000);

  // some more code, executed 5 seconds after the first code block finishes
}
Anthony De Smet
sumber