Jquery İle Geri Sayım Sayacı Yapımı

Bazı form alanlarında bir işlemin sık sık yapılmasını önlemek veya sayfada beklenilen belirli bir sürenin sonunda ziyaretçi için bir işlem yapmak istediğimiz durumlarda ihtiyacımızın olduğu örnekleri bolca çoğaltabileceğimiz minik bir uygulama yapacağız. Geri sayım sayacımız sıfırlandığında yönlendirme işlemi yapacağız, bu kodlarımızı da fonksiyona çevireceğiz.

function surelimiti(saniye){
    setInterval(function(){
      if(saniye > 1){
        saniye--;
        console.log(saniye + ' bekleyin');
      }else{
        $(location).attr('href', 'https://viptema.com')
      }
    },1000);
  }
  
  surelimiti(20);

Yukarıda ki kda göre 20 saniye sonra yönlendirme gerçekleşecek, console.log'ta ise canlı olarak 20 den geriye doğru sayılacaktır. Dilerseniz bunu bir html olarak gösterebilirsiniz. Eğer bekletilmek istenen süre post işlemi sonucu size dönüyor ve dinamikse fonksiyon içerisine bu değeri yazmalısınız.

Örnek senaryo

 //ajax.php den dönen örnek json yanıt
 //{"durum": "zamanvar","kalan_saniye": 20}
 
 $("#sifremiunuttum").submit(function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  $.ajax({
    type: "POST",
    url: 'ajax.php',
    data:formData,
    cache:false,
    contentType: false,
    processData: false,
    dataType:"json",
    success: function(data){

      if (data.durum == "zamanvar"){
        surelimiti(data.kalan_saniye);

      }

      if (data.durum == "ok"){
        //yapacağınız işlemler

      }

  });
});

Php tarafında dinamik olarak session ile kalan saniyeyi json ile aşağıdaki gibi gösterebilirsiniz.

if ( !isset($_SESSION['surelimit']) ){ //session yoksa
	$_SESSION['surelimit'] = time() + 120;


	$output["durum"] = "ok";
}else{ //session varsa
	if (time() > $_SESSION['surelimit']) {
		$_SESSION['surelimit'] = time() + 120;

		$output["durum"] = "ok";
	}else{
		$output["durum"] = "zamanvar";

		$d1 = new DateTime(date("Y-m-d H:i:s"));
		$d2 = new DateTime(date('Y-m-d H:i:s', $_SESSION['surelimit']));
		$saniye_farki = $d2->getTimestamp() -$d1->getTimestamp();
		$output["kalan_saniye"] = $saniye_farki;
	}
}
echo json_encode($output);