Bagaimana untuk melaksanakan pemasa dalam jquery

JQuery ialah perpustakaan JavaScript yang sangat popular yang memberikan kami banyak fungsi mudah untuk mengendalikan DOM, pengendalian acara, kesan animasi dan banyak lagi. Antaranya, pemasa juga merupakan fungsi yang sangat penting dalam JQuery Kita boleh menetapkan pemasa untuk merealisasikan antara muka kemas kini dinamik, carta karusel dan fungsi lain. Seterusnya, artikel ini akan memperkenalkan secara terperinci cara menggunakan JQuery untuk melaksanakan fungsi pemasa.

1. kaedah setInterval()

JQuery menyediakan kaedah setInterval() untuk melaksanakan fungsi pemasa. Kaedah ini menerima dua parameter: parameter pertama ialah fungsi yang akan dilaksanakan, dan parameter kedua ialah selang pelaksanaan dalam milisaat. Sebagai contoh, kita boleh menggunakan kod berikut untuk memaparkan kotak gesaan setiap 1 saat:

setInterval(function(){
    alert("Hello World!");
}, 1000);

Perlu diingat bahawa kaedah setInterval() mengembalikan ID pemasa dan kita boleh menggunakan ID ini untuk mengosongkan pemasa. Sebagai contoh, kod berikut boleh digunakan untuk menghentikan pemasa di atas selepas 2 saat:

var timerID = setInterval(function(){
    alert("Hello World!");
}, 1000);
setTimeout(function(){
    clearInterval(timerID);
}, 2000);

Kaedah setTimeout() digunakan di sini untuk melaksanakan operasi menghentikan pemasa dengan kelewatan selama 2 saat. Kaedah clearInterval() boleh mengosongkan pemasa yang dibuat oleh kaedah setInterval().

2. kaedah setTimeout()

Sebagai tambahan kepada kaedah setInterval(), JQuery juga menyediakan kaedah setTimeout(), yang digunakan untuk melaksanakan masa yang ditentukan selepas tempoh masa tertentu fungsi. Kaedah setTimeout() juga menerima dua parameter: parameter pertama ialah fungsi yang akan dilaksanakan, dan parameter kedua ialah selang pelaksanaan dalam milisaat. Sebagai contoh, kod berikut boleh muncul kotak gesaan selepas 3 saat:

setTimeout(function(){
    alert("Hello World!");
}, 3000);

Begitu juga, kaedah setTimeout() juga mengembalikan ID pemasa dan pemasa boleh dikosongkan melalui kaedah clearTimeout().

3. Laksanakan carta karusel

Di atas memperkenalkan dua kaedah pemasa dalam JQuery Kita boleh menggunakan kaedah ini untuk melaksanakan beberapa fungsi biasa, seperti carta karusel . Mari perkenalkan kaedah pelaksanaan carta karusel yang mudah.

<div class="slider">
    <ul>
        <li><img src="image1.jpg"></li>
        <li><img src="image2.jpg"></li>
        <li><img src="image3.jpg"></li>
    </ul>
</div>

.slider {
    width: 500px;
    height: 300px;
    overflow: hidden;
}
.slider ul {
    list-style: none;
    width: 1500px;
    height: 300px;
    margin: 0;
    padding: 0;
}
.slider li {
    float: left;
    width: 500px;
    height: 300px;
}

var index = 0;
var timerID = setInterval(function(){
    index++;
    if(index > 2){
        index = 0;
    }
    $(".slider ul").animate({
        left: -index * 500 + "px"
    }, 500);
}, 2000);

$(".slider").hover(function(){
    clearInterval(timerID);
}, function(){
    timerID = setInterval(function(){
        index++;
        if(index > 2){
            index = 0;
        }
        $(".slider ul").animate({
            left: -index * 500 + "px"
        }, 500);
    }, 2000);
});

Kod ini melaksanakan imej karusel yang berkitar setiap 2 saat. Apabila tetikus bergerak ke dalam karusel, pemasa dikosongkan dan dimulakan semula apabila tetikus bergerak keluar. Prinsip pelaksanaan gambar karusel ini sangat mudah Ia menggunakan pemasa dan kesan animasi untuk menetapkan nombor kitaran dan selang kitaran untuk menukar gambar sekali-sekala.

Ringkasnya, pemasa ialah fungsi yang sangat biasa digunakan dalam JQuery Ia boleh mencapai beberapa kesan dinamik dan gambar rajah karusel dan fungsi lain. Kita boleh menggunakan kaedah setInterval() atau setTimeout() untuk melaksanakan pemasa Pada masa yang sama, kita mesti memberi perhatian kepada pengurusan dan mengosongkan ID pemasa untuk mengelakkan kebocoran memori.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemasa dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!