JQuery ile SetTimeout ile Zamanlı İşlemler Örneği

Bu örnekte, bir HTML belgesi içinde bir buton ve bir boş div öğesi bulunmaktadır. jQuery kullanarak butona tıkladığınızda, önce $("#sonuc") içindeki metni "Butona tıklandı!" olarak ayarlarız. Daha sonra setTimeout fonksiyonunu kullanarak, 2 saniye (2000 milisaniye) sonra metni "Belirli bir süre sonra metin değişti!" olarak değiştiririz.

Genel Açıklama:

  • HTML belgesi içinde bir buton ve sonucu göstermek için bir div öğesi bulunur.
  • jQuery kullanarak butona tıkladığınızda, setTimeout fonksiyonunu kullanarak bir işlevi belirli bir süre sonra çalıştırırız.
  • setTimeout içindeki işlev, belirli bir süre (milisaniye cinsinden) sonra çalıştırılacak işlemleri içerir.
  • İşlev, $("#sonuc") içindeki metni değiştirir ve bu şekilde sonucu gösterir.

HTML ve jQuery kullanarak bu örnek, belirli bir süre sonra işlevleri nasıl tetikleyebileceğinizi göstermektedir. Bu, kullanıcı etkileşimleri, animasyonlar veya belirli zaman aralıklarıyla tekrar eden görevler gibi birçok farklı senaryoda kullanışlıdır.

HTML Örneği:

<body>
    <button id="btn">Tıkla</button>
    <div id="sonuc"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>

jQuery ile JavaScript (script.js) Örneği:

$(document).ready(function() {
    $("#btn").click(function() {
        $("#sonuc").text("Butona tıklandı!");

        setTimeout(function() {
            $("#sonuc").text("Belirli bir süre sonra metin değişti!");
        }, 2000); // 2 saniye sonra mesajı değiştir
    });
});
Kategoriler