SetInterval İlk Yüklenmede 2 Katı Bekliyor?

22-09-2023, 10:35:49

Merhabalar.

İşyerinde boş vakitlerimde Javascript dersleri izliyorum. Bir manşet uygulaması yapmaya çalıştım. Kullandığım kodda 2 saniye arayla manşet otomatik çalışıyor. Fakat sayfa ilk yüklendiğinde 4 saniye bekliyor. Sebebini çözemedim.

var slaytIndex = 0;
setInterval(function(){
  slaytGoster(slaytIndex);
}, 2000);
function slaytGoster(sira){
  var i;
  var slaytlar = document.getElementsByClassName("manset-eleman");
  for (i = 0; i < slaytlar.length; i++) {
    slaytlar[i].style.display = "none";
  }
  slaytlar[sira].style.display = "block";
  slaytIndex++;
  if(slaytIndex >= slaytlar.length) {slaytIndex = 0;}
}
setInterval(function(){
  console.log("Deneme");
}, 2000);

<!doctype html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Manşet</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <style>
      #manset-alani {
        height: 500px;
      }
      #manset-ici {
        height: 440px;
      }
      .manset-eleman {
        height: 440px;
        line-height: 440px;
        font-size: 100px;
      }
      #manset-1 {
        background: #fd8585;
      }
      #manset-2 {
        background: #859bfd;
        display: none;
      }
      #manset-3 {
        background: #8ffd85;
        display: none;
      }
      #sayfalama {
        height: 50px;
        margin-top: 10px;
        font-size: 30px;
        line-height: 50px;
      }
      .sayfa:nth-child(1) {
        background: #fd8585;
      }
      .sayfa:nth-child(2) {
        background: #859bfd;
      }
      .sayfa:nth-child(3) {
        background: #8ffd85;
      }
      .sayfa:hover {
        background: #000000;
        color: #fff;
      }
    </style>
  
  </head>
  <body>
    <div class="container mt-5 p-0  text-center" id="manset-alani">
      <div class="container p-0" id="manset-ici">
        <div class="manset-eleman" id="manset-1">1</div>
        <div class="manset-eleman" id="manset-2">2</div>
        <div class="manset-eleman" id="manset-3">3</div>
      </div>
      <div class="container" id="sayfalama">
        <div class="row">
          <div class="col sayfa">1</div>
          <div class="col sayfa mx-1">2</div>
          <div class="col sayfa">3</div>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  
  </body>
</html>

22-09-2023, 10:38:44

#2

Burkaydinn

Kod doğru. Burada sayfa yüklenmesi kısmında gecikme olduğundan dolayı 4 saniye bekliyor olabilir. Veya tarayıcının o sıra farklı bir şeyle meşgul olmasından dolayı oluyor olabilir.

22-09-2023, 10:39:30

#3

adwerd0z1

Kimlik doğrulama veya yönetimden onay bekliyor.

2 burada bekliyor

var slaytIndex = 0;
setInterval(function(){
slaytGoster(slaytIndex);
}, 2000);
function

En alttaki kodda da ayrı 2 bekletiyor

22-09-2023, 10:43:38

#4

KOCABAL

Burkaydinn adlı üyeden alıntı: mesajı görüntüle

Kod doğru. Burada sayfa yüklenmesi kısmında gecikme olduğundan dolayı 4 saniye bekliyor olabilir. Veya tarayıcının o sıra farklı bir şeyle meşgul olmasından dolayı oluyor olabilir.

Hocam onu düşündüğüm için altta bir deneme console.log kodu koydum. Onda bekleme yapmıyor ama.

adwerd0z1 adlı üyeden alıntı: mesajı görüntüle

2 burada bekliyor

var slaytIndex = 0;
setInterval(function(){
slaytGoster(slaytIndex);
}, 2000);
function

En alttaki kodda da ayrı 2 bekletiyor

Hocam alttaki kodu deneme olarak koydum. O olsa da olmasa da manşet ilk seferinde 4 saniye bekliyor. Acaba yüklenmede sorun mu var diye ikinci kodu ekledim. İkinci kod 2. saniyede çalışıyorken manşet yine ilk seferinde 4. saniye bekliyor.

22-09-2023, 10:47:58

#5

Burkaydinn

O koyduğunuz console.log sayfa yenilenmesine başlandığı an çalışmaya başlar. O yüzden yanılıyorsunuz.

document.addEventListener("DOMContentLoaded", function () {
  var slaytIndex = 0;
  setInterval(function(){
    slaytGoster(slaytIndex);
  }, 2000);

  function slaytGoster(sira){
    var i;
    var slaytlar = document.getElementsByClassName("manset-eleman");
    for (i = 0; i < slaytlar.length; i++) {
      slaytlar[i].style.display = "none";
    }
    slaytlar[sira].style.display = "block";
    slaytIndex++;
    if(slaytIndex >= slaytlar.length) {slaytIndex = 0;}
  }

  setInterval(function(){
    console.log("Deneme");
  }, 2000);
});

Bu şekilde kullanırsanız sayfa tamamen yüklendikten sonra slayt otomatik olarak başlar.

22-09-2023, 10:54:19

#6

KOCABAL

Burkaydinn adlı üyeden alıntı: mesajı görüntüle

O koyduğunuz console.log sayfa yenilenmesine başlandığı an çalışmaya başlar. O yüzden yanılıyorsunuz.

document.addEventListener("DOMContentLoaded", function () {
  var slaytIndex = 0;
  setInterval(function(){
    slaytGoster(slaytIndex);
  }, 2000);

  function slaytGoster(sira){
    var i;
    var slaytlar = document.getElementsByClassName("manset-eleman");
    for (i = 0; i < slaytlar.length; i++) {
      slaytlar[i].style.display = "none";
    }
    slaytlar[sira].style.display = "block";
    slaytIndex++;
    if(slaytIndex >= slaytlar.length) {slaytIndex = 0;}
  }

  setInterval(function(){
    console.log("Deneme");
  }, 2000);
});

Bu şekilde kullanırsanız sayfa tamamen yüklendikten sonra slayt otomatik olarak başlar.

Hocam burada iki kodu da DOMContentLoaded içine aldık. İkisinin aynı anda başlaması gerekmiyor mu? Denediğimde benim yaptığım arasında hiç bir fark olmadı.

22-09-2023, 10:58:14

#7

Burkaydinn

KOCABAL adlı üyeden alıntı: mesajı görüntüle

Hocam burada iki kodu da DOMContentLoaded içine aldık. İkisinin aynı anda başlaması gerekmiyor mu? Denediğimde benim yaptığım arasında hiç bir fark olmadı.

Yok ikisi aynı anda başlamaz. Bir de şöyle deneyin

var slaytIndex = 0; setInterval(function(){  slaytGoster(slaytIndex); console.log("Deneme"); }, 2000); function slaytGoster(sira){  var i;  var slaytlar = document.getElementsByClassName("manset-eleman");  for (i = 0; i < slaytlar.length; i++) {    slaytlar[i].style.display = "none";  }  slaytlar[sira].style.display = "block";  slaytIndex++;  if(slaytIndex >= slaytlar.length)

22-09-2023, 10:59:05

#8

Burkaydinn

Düzgün oluşturmamış console.log u ilk setintervalın içerisinde slaytGoster(slaytIndex); bunun altına yazın ve diğer setıntervalı kaldırın.

22-09-2023, 11:03:52

#9

KOCABAL

Burkaydinn adlı üyeden alıntı: mesajı görüntüle

Düzgün oluşturmamış console.log u ilk setintervalın içerisinde slaytGoster(slaytIndex); bunun altına yazın ve diğer setıntervalı kaldırın.

İlk intervalin içine koyduğum console log yine 2. saniyede başlıyor