v2.5.2
Giriş yap

ajax ile çekilen veriler birbirine karışıyor

medesan
339 defa görüntülendi

merhaba arkadaşlar, Linkteki gibi bir çalışmam var. listeden bir değer seçtiğimde varsayılan değer ile listeden yeni seçilen değerin verileri bir birine karışıyor. bu konuda yardıma ihtiyacım var. yardımcı olabilirseniz sevinirim.

Cevap yaz
Cevaplar (4)
ebykdrms
742 gün önce

Bir hata yapmış olmalısınız. Verdiğiniz linkte JS kodlarını şu şekilde düzenlediğimde bir sorunla karşılaşmadım:

$(function(){
	IftarSahurVakti(9146);
	$('#sehirler option[value="9402"]').prop("selected", true);
});
    
// global olarak interval'i tutacak bir değişken oluşturuyorum:
var countdownInterval = null;

function IftarSahurVakti(targetLocationId)
{
    var $test = $("#imsakiye").eq(0);
    $countdownName = $test.find("#test-countdown-name");
    $countdown = $test.find("#test-countdown");

    var now = new Date();
    var tomorrow = new Date(now);
    tomorrow.setDate(tomorrow.getDate()+1);

    $.ajax({
        type:"get",
        url:"https://namaz-vakti-api.herokuapp.com/data?region="+targetLocationId,
        success:function(response){
            var todayImsak = response[0][1].split(":");
            var todayAksam = response[0][5].split(":");
            var tomorrowImsak = response[1][1].split(":");
            var todayImsakDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), todayImsak[0], todayImsak[1], 0);
            var todayAksamDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), todayAksam[0], todayAksam[1], 0);
            var tomorrowImsakDate = new Date(tomorrow.getFullYear(), tomorrow.getMonth(), tomorrow.getDate(), tomorrowImsak[0], tomorrowImsak[1], 0);

            if(now <= todayImsakDate) $countdownName.text("Sahura kalan süre:");
            else if(now > todayImsakDate && now <=todayAksamDate) $countdownName.text("İftara kalan süre:");
            else $countdownName.text("Sahura kalan süre:");

            calculateCountdown(todayImsakDate, todayAksamDate, tomorrowImsakDate, $countdown);
          
            // daha önce oluşturulmuş bir interval varsa onu kaldırıyorum.
            if(countdownInterval) clearInterval(countdownInterval);
          
            // Yeni oluşturacağım interval'i global interval değişkenime atıyorum.
            countdownInterval = setInterval(function() {
                calculateCountdown(todayImsakDate, todayAksamDate, tomorrowImsakDate, $countdown);
            },1000);
        }
    });
}

function calculateCountdown(imsakDate, aksamDate, tomorrowImsakDate, $element) {
    now = new Date();
    var targetDate = null;
    if(now <= imsakDate) targetDate = imsakDate;
    else if(now > imsakDate && now <=aksamDate) targetDate = aksamDate;
    else targetDate = tomorrowImsakDate;
    
    var hours = parseInt((targetDate - now) / (1000 * 60 * 60) % 24);
    var minutes = parseInt((targetDate.getTime() - now.getTime()) / (1000 * 60) % 60);
    var seconds = parseInt((targetDate.getTime() - now.getTime()) / (1000) % 60); 
    $element.text(hours + " saat " + minutes + " dakika " + seconds + " saniye");
}
batuhanal
741 gün önce

Bu Kadar Basit Birşeyi Bu kadar uzatmak mantıksız

fff=null;
$(function(){	

			IftarSahurVakti(9146);
			$('#sehirler option[value="9402"]').prop("selected", true);
})
    
    

function IftarSahurVakti(targetLocationId)
{
	clearInterval(fff);
  var $test = $("#imsakiye").eq(0);
  $countdownName = $test.find("#test-countdown-name");
  $countdown = $test.find("#test-countdown");

  var now = new Date();
  var tomorrow = new Date(now);
  tomorrow.setDate(tomorrow.getDate()+1);

  $.ajax({
      type:"get",
      url:"https://namaz-vakti-api.herokuapp.com/data?region="+targetLocationId,
      success:function(response){
          var todayImsak = response[0][1].split(":");
          var todayAksam = response[0][5].split(":");
          var tomorrowImsak = response[1][1].split(":");
          var todayImsakDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), todayImsak[0], todayImsak[1], 0);
          var todayAksamDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), todayAksam[0], todayAksam[1], 0);
          var tomorrowImsakDate = new Date(tomorrow.getFullYear(), tomorrow.getMonth(), tomorrow.getDate(), tomorrowImsak[0], tomorrowImsak[1], 0);

          if(now <= todayImsakDate) $countdownName.text("Sahura kalan süre:");
          else if(now > todayImsakDate && now <=todayAksamDate) $countdownName.text("İftara kalan süre:");
          else $countdownName.text("Sahura kalan süre:");

          calculateCountdown(todayImsakDate, todayAksamDate, tomorrowImsakDate, $countdown);
          fff = setInterval(function() {
              calculateCountdown(todayImsakDate, todayAksamDate, tomorrowImsakDate, $countdown);
          },1000);
      }
  });
  
}

function calculateCountdown(imsakDate, aksamDate, tomorrowImsakDate, $element) {
    now = new Date();
    var targetDate = null;
    if(now <= imsakDate) targetDate = imsakDate;
    else if(now > imsakDate && now <=aksamDate) targetDate = aksamDate;
    else targetDate = tomorrowImsakDate;
    
    var hours = parseInt((targetDate - now) / (1000 * 60 * 60) % 24);
    var minutes = parseInt((targetDate.getTime() - now.getTime()) / (1000 * 60) % 60);
    var seconds = parseInt((targetDate.getTime() - now.getTime()) / (1000) % 60); 
    $element.text(hours + " saat " + minutes + " dakika " + seconds + " saniye");
}
medesan
745 gün önce

merhaba Emre hocam cevabınız için teşekkür ederim fakat yine de atlama yapıyor. yani bi önce değerle yeni değer arasında gidip geliyor. :(

ebykdrms
745 gün önce

<select> elementinin onchange olayını tetikleterek çalıştırdığınız fonksiyonun içinde setInterval() fonksiyonu var. Her onchange olayıyla yeni bir setInterval() daha kuruyorsunuz. Yeni setInterval() fonksiyonunu çalıştırmadan önce, öncekini durdurmalısınız.

1) Mesela ilk satırda global bir değişken oluşturun:

var countdownInterval = null;

2) setInterval() fonksiyonunu oluştururken bu değişkene de atayın. Ayrıca sayımı başlatmadan önce, önceki sayımı temizleyin.

calculateCountdown(todayImsakDate, todayAksamDate, tomorrowImsakDate, $countdown);
if(countdownInterval) clearInterval(countdownInterval);
countdownInterval = setInterval(function() {
  calculateCountdown(todayImsakDate, todayAksamDate, tomorrowImsakDate, $countdown);
},1000);