setTimeout不起作用，在for循環中排隊的其他方法？
[英]setTimeout not working, other methods of queuing in a for loop?
問題描述
下面的代碼（在我的真實示例中div陰影，我想順序地將其不透明度降低為0，以便每個都按順序消失。
我嘗試不使用setTimeout來執行此操作，但是所有div同時消失了-很高興知道更改不透明度的代碼部分可以工作，但是我似乎無法讓它們按順序工作。
當我嘗試使用setTimeout時（我認為我實現不正確），什么都沒有發生！
對此，任何幫助都將不勝感激，我對JavaScript還是很陌生，並且有一段時間沒接觸過它，並且教程也無法幫助我。
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<script type="text/javascript">
// the divs that we want to cycle through are named here.
var divs = ["#div1", "#div2", "#div3", "#div4"];
var divsLength = divs.length;
for (var i = 0; i < divsLength; i++) {
setTimeout(function(){
$(divs[i]).fadeTo(1000, 0, function() {
});
},1500);
};
</script>
</body>
5 個解決方案
解決方案1
1 2014-09-10 16:02:12
您可以使用遞歸函數執行此類操作，例如：
function seqFade($el){
$el.first().fadeOut(500, function(){ //Take the first element and fade it out
seqFade($el.slice(1)); //Recall the function when complete with the same set of element minus the first one.
})
}
seqFade($('div')); //Call the function
在您的代碼中，它看起來可能像這樣：
function seqFade($el){
$el.first().fadeOut(500, function(){
seqFade($el.slice(1));
})
}
seqFade($('#div1, #div2, #div3, #div4'));
解決方案2
1 2014-09-10 16:02:33
這是因為當超時最終觸發時，變量“ i”僅具有最后一個索引值。 同樣，循環將幾乎同時啟動所有超時。
還有其他方法可以完成此操作，但是這可能需要對代碼進行最少的更改。
嘗試這個：
<script type="text/javascript">
var divs = ["#div1", "#div2", "#div3", "#div4"];
var divsLength = divs.length;
for (var i = 0; i < divsLength; i++) {
setTimeout((function(index) {
return function(){
$(divs[index]).fadeTo(1000, 0, function() { });
}
)(i)),1500 + (i * 1500));
};
</script>
</body>
這將在調用函數時使用其自己的索引副本創建該函數的實例。 同樣，增加每個超時的超時將使它們順序執行。
解決方案3
1 已采納 2014-09-10 16:05:09
這是一種無需setTimeout就可以執行此操作的方法：
function doFade(items, index) {
$(items[index]).fadeTo(1000, 0, function() {
doFade(items, index + 1);
});
}
doFade(divs, 0);
如果您要針對支持ES5的瀏覽器（大多數現代版本支持），則可以進一步簡化doFade：
function doFade(items, index) {
$(items[index]).fadeTo(1000, 0, doFade.bind(this, items, index + 1));
}
解決方案4
0 2014-09-10 16:33:07
嘗試這個：
// the divs that we want to cycle through are named here.
var divs = ["#div1", "#div2", "#div3", "#div4"];
(function fade(i) {
$(divs[i]).fadeTo(1000, 0, function() {
setTimeout(function() {fade(++i);}, 500);
});
})(0);
解決方案5
-1 2014-09-10 15:58:53
for (var i = 1; i <= divsLength; i++) {
setTimeout(function(){
$(divs[i]).fadeTo(1000, 0, function() {
});
},1000*i);
讓我們嘗試一下
jQuery setTimeout出現問題，並且無法在循環中正常工作
[英]Jquery setTimeout is making issues and not working properly in loop
setTimeOut 在循環 Javascript React 內部不起作用
[英]setTimeOut is not working inside for loop Javascript React
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.