Почему первый AJAX получен через 10 секунд с помощью setInterval () - PullRequest
Новая
       10

Почему первый AJAX получен через 10 секунд с помощью setInterval ()

0 голосов
/ 01 апреля 2020

Мне необходимо отправить запрос ajax, который отображает изображение и меняется каждые 10 секунд. Однако мне интересно, почему моя веб-страница всегда пуста в первые 10 секунд, а начинает отображать первое изображение только через 10 секунд . 

var images = [
{ uri:'photo-1539154444419-e31272d30a31.jpg', description:'medium-coated black-and-white dog near grass during daytime' },
{ uri:'photo-1553882809-a4f57e59501d.jpg',    description:'black and tan Belgian dog' },
{ uri:'photo-1554196721-b507d7e86ee9.jpg',    description:'gray dog standing on grass' },
{ uri:'photo-1555661059-7e755c1c3c1d.jpg',    description:'black dog behind plants' },
{ uri:'photo-1555991415-1b04a71f18c5.jpg',    description:'adult white Samoyed beside man and woman' },
{ uri:'photo-1558121591-b684092bb548.jpg',    description:'white and black dog lying on sofa' },
{ uri:'photo-1559440165-065646588e9a.jpg',    description:'person holding dog leash short-coat black and white dog' },
{ uri:'photo-1560160643-7c9c6cb07a8b.jpg',    description:'short-coated brown and white dog' 
},
{ uri:'photo-1562220058-1a0a019ab606.jpg',    description:'pet dog laying on sofa' },
{ uri:'photo-1565194481104-39d1ee1b8bcc.jpg', description:'short-coated gray dog' }
];

var k = 0;
router.get('/images.json', function(req, res, next) {
res.send(images[k]);
k++;
if (k == 10){
k=0;
}
});

В HTML: 

<!DOCTYPE HTML>
<html>
<head>
    <title>gallery.html</title>
</head>
<body>
    <img id ="image"<img src="data:," alt>
    <p id ="imagePara"></p>
    <script>
setInterval(function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState ==4 && this.status == 200){
    var json = this.responseText;
    var jsonObj = JSON.parse(json);

     var desc = JSON.stringify(jsonObj.description);
     var uriImage = JSON.stringify(jsonObj.uri);
     var uriImage2 = uriImage.substring(1, uriImage.length-1);

    var thisImage = document.getElementById("image");
    thisImage.src = "images/doggos/"+uriImage2;
    thisImage.alt = desc;

    var para = document.getElementById("imagePara");
    para.innerHTML = desc;
}
};
xhttp.open("GET","/images.json",true);
xhttp.send();
}, 10000);     
</script>
</body>
</html>

Может кто-нибудь помочь мне с этим? Спасибо!

1 Ответ

1 голос
/ 01 апреля 2020

setInterval не вызывает переданную функцию немедленно - первый вызов будет только после того, как первоначальная продолжительность прошла (и после каждой продолжительности). Так что если у вас есть setInterval(fn, 10000), который будет вызывать fn через 10 секунд, а затем через 20 секунд и т. Д. c.

Создайте отдельную функцию, вызовите ее и также передайте ее * 1006. *, например: 

const fn = () => {
  // do work here
};
setInterval(fn, 10000);
fn();

Для вашего кода: 

const fn = () => {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var json = this.responseText;
      var jsonObj = JSON.parse(json);

      var desc = JSON.stringify(jsonObj.description);
      var uriImage = JSON.stringify(jsonObj.uri);
      var uriImage2 = uriImage.substring(1, uriImage.length - 1);

      var thisImage = document.getElementById("image");
      thisImage.src = "images/doggos/" + uriImage2;
      thisImage.alt = desc;

      var para = document.getElementById("imagePara");
      para.innerHTML = desc;
    }
  };
  xhttp.open("GET", "/images.json", true);
  xhttp.send();
};
setInterval(fn, 10000);
fn();
...