jQuery：设置间隔
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4355076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: setInterval
提问by Tom
I want to make a slideshow on my site, but the problem is that the setInterval works only one time. It loads my file only one time end then stops.
我想在我的网站上制作幻灯片，但问题是 setInterval 只能工作一次。它只加载我的文件一次，然后停止。
Heres the code: main.html
代码如下：main.html
<img src="images/ex/full.jpg" width="800" height="377" alt="">
<script>
$(document).ready(function(){
var refreshId = setInterval(function(){
$('#center').load('images/gallery/best/rotate.php');
}, 5000);
});
</script>
rotate.php
旋转.php
<img src="images/gallery/best/random.php?".<?php echo rand(0,1000) ?>."" width="800" height="377" alt="">
random.php contains a code which loads random image from selected folder, it works good.
random.php 包含一个从选定文件夹加载随机图像的代码，效果很好。
Forgot to mention, I got lightbox scripts included too. Maybe they don't work together?
忘了提，我也包括灯箱脚本。也许他们不合作？
Head:
头：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="vendors/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="vendors/js/prototype.js"></script>
<script type="text/javascript" src="vendors/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="vendors/js/lightbox.js"></script>
<link rel="stylesheet" href="styles/style.css" type="text/css" />
<link rel="stylesheet" href="styles/lightbox.css" type="text/css" />
Thanks.
谢谢。
采纳答案by bozdoz
<script>
$(document).ready(function(){
var refreshId = setInterval(function(){
var r = (-0.5)+(Math.random()*(1000.99));
$('#center').load('images/gallery/best/random.php?'+r);
}, 5000);
});
</script>
How about that?
那个怎么样？
--
——
Edit
编辑
Sorry, I meant that you should just randomize the photos in the setInterval function. As illustrated above. Instead of rotate.php; just load random.php.
抱歉，我的意思是你应该在 setInterval 函数中随机化照片。如上图所示。而不是rotate.php; 只需加载random.php。
回答by Blair McMillan
Expanding on my comment, if it is a caching issue, then you can update your code with
扩展我的评论，如果它是缓存问题，那么您可以使用
<script>
$(document).ready(function(){
var refreshId = setInterval(function(){
$('#center').load('images/gallery/best/rotate.php?' + new Date().getTime());
}, 5000);
});
</script>
Which will cause the url to be different on each request and hence will avoid your caching issue.
这将导致每个请求的 url 不同，因此将避免您的缓存问题。
回答by Guffa
There problem is not the setInterval, it's the caching of the image. When the image tag is loaded, it looks exactly like the one before. The browser doesn't load the image again, it just uses the one that is already loaded.
问题不是setInterval，而是图像的缓存。加载图像标签后，它看起来与之前的完全一样。浏览器不会再次加载图像，它只会使用已经加载的图像。
If you want to load the image again, change your rotate.phpto include a counter or random number as parameter in the URL, returning something that for example looks like this:
如果您想再次加载图像，请更改您rotate.php在 URL 中包含一个计数器或随机数作为参数，返回例如如下所示的内容：
<img src="images/gallery/best/random.php?98037465936" width="800" height="377" alt="">
By changing the URL each time the tag is loaded, the browser has to load the new image each time.
通过在每次加载标签时更改 URL，浏览器每次都必须加载新图像。
回答by Nathan MacInnes
The problem is probably that the browser has loaded random.php into the cache. I think you'd be better off giving each image it's own url and using that. Then a php page can present just the src:
问题可能是浏览器已将 random.php 加载到缓存中。我认为您最好为每个图像提供自己的网址并使用它。然后一个 php 页面可以只显示 src：
var refreshId = setInterval(function () {
$.get('random-src.php', function (result) {
$('#center>img').attr('src') = result;
},'text');
},5000);
Then random.php could return img/img1.jpg, img/img2.jpg, etc at random.
然后random.php可以返回img/img1.jpg，img/img2.jpg等随意。
Alternatively, you could stick header("Cache-Control: no-cache, must-revalidate");towards the top of your random.php file to prevent the browser from caching.
或者，您可以坚持header("Cache-Control: no-cache, must-revalidate");您的 random.php 文件的顶部以防止浏览器缓存。
