What causes the initial AJAX response to be delayed by 10 seconds when using setInterval()?

Question

What causes the initial AJAX response to be delayed by 10 seconds when using setInterval()?

I have a task that requires me to send an ajax request to display an image that changes every 10 seconds. However, I'm encountering an issue where my webpage remains blank for the first 10 seconds and only displays the first image after the initial delay.

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;
}
});

In 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>

Seeking assistance with this issue. Thank you!

javascript ajax setinterval

Answer 1

Answer №1

setInterval function doesn't execute the passed function immediately. The first call will occur after the initial duration has passed, and then continue to repeat based on the specified interval. For instance, if you have setInterval(fn, 10000), it will call fn after 10 seconds, then 20 seconds, and so on.

To ensure the function is called immediately, create a separate function, invoke it, and also pass it to setInterval like:

const fn = () => {
  // code goes here
};
setInterval(fn, 10000);
fn();

Your code snippet should be modified as follows:

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();

Answer 2

setInterval function doesn't execute the passed function immediately. The first call will occur after the initial duration has passed, and then continue to repeat based on the specified interval. For instance, if you have setInterval(fn, 10000), it will call fn after 10 seconds, then 20 seconds, and so on.

To ensure the function is called immediately, create a separate function, invoke it, and also pass it to setInterval like:

const fn = () => {
  // code goes here
};
setInterval(fn, 10000);
fn();

Your code snippet should be modified as follows:

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();

What causes the initial AJAX response to be delayed by 10 seconds when using setInterval()?

Answer №1

Similar questions

Unable to utilize the "let" keyword in WebStorm

Capture a fragment of a scene and convert it into a unique texture using THREE.JS

Change the CSS element if the current URL is not example.com/page1 or example.com/page2

How can we trigger the Skill bar effect upon scrolling to the section?

"Incorporating Node.js (crypto) to create a 32-byte SHA256 hash can prevent the occurrence of a bad key size error triggered by tweetnacl.js. Learn how to efficiently

Angular directive does not focus on the text box

The alignment is off

What are the steps to address the Invalid Hook Call issue while working with Material UI?

Is there a way to transfer a JSON map object from Flask and then utilize it as a JavaScript object?

Is it possible to use both the filter $select.search and the limitTo $select.infiniteCurrentLimit on a single ui-select field?

"Encountering a failure with PHP PDO prepared delete statement in MySQL while executing an Ajax

What is the correct way to encode an HTML string in JavaScript?

When using onclick="location.href='page.html'", the page fails to load on Safari browser

Load Angular modules dynamically

Monitoring changes in session storage with AngularJS

Struggling with UI-Grid's single filter feature when dealing with intricate data structures?

Ensure that site content remains visible above the table when refreshing the Ajax Table

Ways to synchronize countdown timer on different tabs using the same link

Tips for keeping the header section anchored to the top of the page

Tips for eliminating null values from a JavaScript object