在for循环中使用setTimeout - 不工作
问题描述：
我在a循环中有一个setTimeout，但它不像我预期的那样工作。在for循环中使用setTimeout - 不工作
我在一次加载所有页面的页面上有一串横幅。我将他们的父母的div html并将其存储在一个数组中。然后，我想每个父母每5秒收到一次相应的html。这只需要在就绪状态下发生一次。
这里是我的代码...
function oneBanner() {
var divs = $('.banner-slide'),
imgs = [];
for (var j = 0; j < divs.length; j++) {
imgs.push($('.banner-slide:nth-child(' + (j+1) + ')'));
}
for (var k = 0; k < imgs.length; k++) {
var url = $(imgs[k]).html();
$(imgs[k]).html('');
setTimeout(function(y) {
console.log(k * 5000);
$(imgs[k]).html(url);
}, k * 5000, k);
}
}
oneBanner();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="banner-slide">
<img src="http://www.placecage.com/150/150" >
</div>
<div class="banner-slide">
<a href="#"> <img src="http://fillmurray.com/150/150" > </a>
</div>
<div class="banner-slide">
<img src="http://stevensegallery.com/150/150" >
</div>正如你所看到的图像没有得到在同一时间打印在屏幕上的一个每5秒 - 这是我认为我做的。
谢谢你的帮助。
塞尔
答
这将是更好地简化代码，而你不需要任何变量/数组的这个功能之外..你可以只使用jquery .each()
尝试这
function oneBanner() {
var divs = $('.banner-slide');
divs.each(function(i){ // loop through .banner-slide divs
var ThisIt = $(this); // define this outside setTimout function
setTimeout(function(){
divs.hide(); // hide all .banner-slide divs
ThisIt.show(); // show just this one
} , 5000 * i); // time * the i -- i is the index of the div
});
}
在行动中看到的代码
function oneBanner() {
var divs = $('.banner-slide');
divs.each(function(i){
var ThisIt = $(this);
setTimeout(function(){
divs.hide();
ThisIt.show();
} , 5000 * i);
});
}
oneBanner();.banner-slide:not(:first){
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner-slide">
<img src="http://www.placecage.com/150/150" >
</div>
<div class="banner-slide">
<a href="#"> <img src="http://fillmurray.com/150/150" > </a>
</div>
<div class="banner-slide">
<img src="http://stevensegallery.com/150/150" >
</div>注意：使用
setTimeout()你会显示每5秒图像和代码将停止循环
更新到OP评论
function oneBanner() {
var divs = $('.banner-slide'),
htmlArray = [];
divs.each(function(i){
var ThisIt = $(this); // get this outside the setTimout
htmlArray.push(ThisIt.html()); // push the inner html to the array
ThisIt.html(''); // emty this div
setTimeout(function(){
$(ThisIt).html(htmlArray[i]); // add html again with setTimeout every 5 second to its parent div
} , 5000 * i);
});
}
oneBanner();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner-slide">
<img src="http://www.placecage.com/150/150" >
</div>
<div class="banner-slide">
<a href="#"> <img src="http://fillmurray.com/150/150" > </a>
</div>
<div class="banner-slide">
<img src="http://stevensegallery.com/150/150" >
</div>
答
一个字：关闭
function oneBanner() {
var divs = $('.banner-slide'),
imgs = [];
for (var j = 0; j < divs.length; j++) {
imgs.push($('.banner-slide:nth-child(' + (j+1) + ')'));
}
imgs.forEach(($img,k)=>{
\t var url = $img.html();
\t $img.html('');
\t setTimeout(function(y) {
\t \t $img.html(url);
\t }, k * 5000, k);
\t })
\t
}
oneBanner();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="banner-slide">
<img src="http://www.placecage.com/150/150" >
</div>
<div class="banner-slide">
<a href="#"> <img src="http://fillmurray.com/150/150" > </a>
</div>
<div class="banner-slide">
<img src="http://stevensegallery.com/150/150" >
</div>+0
。你的代码在我的真实应用程序中有效，但是你的意思是“关闭”。 – Sergio
答
您正在引用您的setTimeout里面的错误变量。与 'K'
function oneBanner() {
var divs = $('.banner-slide'),
imgs = [];
for (var j = 0; j < divs.length; j++) {
imgs.push($('.banner-slide:nth-child(' + (j+1) + ')'));
}
for (var k = 0; k < imgs.length; k++) {
var url = $(imgs[k]).html();
$(imgs[k]).html('');
setTimeout(function(k) {
console.log(k * 5000);
$(imgs[k]).html(url);
}, k * 5000, k);
}
}
oneBanner();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="banner-slide">
<img src="http://www.placecage.com/150/150" >
</div>
<div class="banner-slide">
<a href="#"> <img src="http://fillmurray.com/150/150" > </a>
</div>
<div class="banner-slide">
<img src="http://stevensegallery.com/150/150" >
</div>
我并不需要 “秀” 每次每5秒替换 'Y'。一旦页面加载，我需要删除每个父母的HTML并将其存储在一个数组中。然后每隔5秒重新将它们插回到原来的位置。它必须是整个内部html - 无论是img标签还是img和锚点。我希望这是有道理的大声笑。 – Sergio
@Sergio答案更新 –
它的工作很精美。你能否详细说明一下。 – Sergio