fungsi wait () atau sleep () di jquery?

101

Saya ingin menambah kelas, tunggu 2 detik dan tambahkan kelas lain.

.addClass("load").wait(2sec).addClass("done");

Apakah ada cara

Steven Moss
sumber

Jawaban:

187

setTimeout akan mengeksekusi beberapa kode setelah penundaan beberapa periode waktu (diukur dalam milidetik). Namun, catatan penting: karena sifat javascript, kode lainnya terus berjalan setelah pengatur waktu diatur:

$('#someid').addClass("load");

setTimeout(function(){
  $('#someid').addClass("done");
}, 2000);

// Any code here will execute immediately after the 'load' class is added to the element.
ctcherry.dll
sumber
2
ini adalah solusi yang buruk saat ini karena kehilangan keuntungan memiliki kontrol jquery atas animasi, seperti .stop (). solusi yang jauh lebih baik adalah .delay ()
user151496
7
@ user123blahblah ... ini adalah solusi PROPER untuk pertanyaan tersebut (yang tidak ada hubungannya dengan animasi). .delay melakukan jack beans di luar antrian animasi. Siapa pun yang memberikan suara positif pada komentar keliru Anda, mereka sendiri juga telah menyesatkan.
IncredibleHat
34

Itu akan menjadi .delay().

http://api.jquery.com/delay/

Jika Anda melakukan hal-hal AJAX, Anda seharusnya tidak langsung menulis "selesai" secara otomatis, Anda harus benar-benar menunggu tanggapan dan melihat apakah itu benar-benar selesai.

Oscar Godson
sumber
1
Juga Steven Anda ingin .removeClass('load')jika tidak menambahkan kedua kelas memuat dan selesai, yang mungkin tidak diinginkan. Jika Anda memang menunggu tindakan asinkron selesai, taruhan terbaik Anda adalah melakukan .addClass KETIKA selesai dan berhasil, jika tidak .addClass ('error') mungkin merupakan ide
Gary Green
52
Fungsi jQUery "delay ()" sama sekali tidak menyediakan fasilitas seperti "wait" untuk keperluan umum. Ini adalah bagian dari sistem animasi, dan hanya berlaku untuk antrean animasi. Fungsi ini selalu kembali dengan segera, dan eksekusi berlanjut tanpa jeda.
Pointy
22

delay () tidak akan melakukan pekerjaan itu. Masalah dengan delay () adalah itu bagian dari sistem animasi, dan hanya berlaku untuk antrian animasi.

Bagaimana jika Anda ingin menunggu sebelum menjalankan sesuatu di luar animasi ??

Gunakan ini:

window.setTimeout(function(){
                 // do whatever you want to do     
                  }, 600);

Apa yang terjadi ?: Dalam skenario ini menunggu 600 milidetik sebelum menjalankan kode yang ditentukan dalam kurung kurawal.

Ini sangat membantu saya setelah saya mengetahuinya dan berharap ini akan membantu Anda juga!

PEMBERITAHUAN PENTING: 'window.setTimeout' terjadi secara asinkron. Ingatlah hal itu saat menulis kode Anda!

J. Louw
sumber
20

Sadarilah bahwa ini adalah pertanyaan lama, tetapi saya menulis plugin untuk mengatasi masalah ini yang mungkin berguna bagi seseorang.

https://github.com/madbook/jquery.wait

memungkinkan Anda melakukan ini:

$('#myElement').addClass('load').wait(2000).addClass('done');
madlee
sumber
2
Terima kasih banyak madlee!
phil294
2

Ada sebuah fungsi, tapi ini ekstra: http://docs.jquery.com/Cookbook/wait

Cuplikan kecil ini memungkinkan Anda menunggu:

$.fn.wait = function(time, type) {
    time = time || 1000;
    type = type || "fx";
    return this.queue(type, function() {
        var self = this;
        setTimeout(function() {
            $(self).dequeue();
        }, time);
    });
};
mrzmyr
sumber
2

Anda dapat menggunakan .delay()fungsinya.
Inilah yang Anda kejar:

.addClass("load").delay(2000).addClass("done");
Blog Pengembang Web
sumber
0

Plugin xml4jQuery memberikan metode sleep (ms, callback). Rantai yang tersisa akan dieksekusi setelah periode tidur.

$(".toFill").html("Click here")
                .$on('click')
                .html('Loading...')
                .sleep(1000)
                .html( 'done')
                .toggleClass('clickable')
                .prepend('Still clickable <hr/>');
.toFill{border: dashed 2px palegreen; border-radius: 1em; display: inline-block;padding: 1em;}
        .clickable{ cursor: pointer; border-color: blue;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script type="text/javascript" src="https://cdn.xml4jquery.com/ajax/libs/xml4jquery/1.1.2/xml4jquery.js"></script>
        <div class="toFill clickable"></div>

Sasha Firsov
sumber
-1

Menggunakan fungsi setTimeout, misalnya Kunjungi di sini misalnya

Abhinav Ranjan Sinha
sumber
21
Dianggap terbaik untuk tidak mengandalkan tautan untuk sebagian besar jawaban Anda
James Jenkins
6
Untuk mencadangkan komentar @JamesJenkins, ini karena tautan tidak selalu dapat diandalkan. Jika seseorang ingin menambahkan tautan, sebaiknya sertakan juga kode itu sendiri dalam jawaban Anda.
Tass