我需要发送一个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>
有人能帮我吗？非常感谢。
setInterval不会立即调用传递的函数-第一次调用将仅在初始持续时间(以及之后的每个持续时间(过去后进行。所以，如果你有一个setInterval(fn, 10000)，它会在10秒后调用fn，然后在20秒后调用，等等。
创建一个单独的函数，调用它，并将它传递给setInterval，如：
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();