Question

我想使用＆＃39; for＆＃39;循环（不是reduce方法或forEach或任何其他方法）迭代动态数据数组（值的数量可以变化）并使用Jquery延迟，以便按顺序使用Jquery效果显示每个值（效果必须在下一个数组之前完成）项目显示）

这是一段代码块，在使用静态代码时没有＆＃39; for＆＃39;循环 - 如您所见，1个值一次淡入：

<div id="container"></div>

<script>
//I want to be able to process data in an array like this -- but currently this array is not being used below
testdata = [1,2,3,4];


var fadeIn1 = function(){
    console.log("started fade in 1");
    var promise = $("<h1>test 1</h1>").hide().appendTo("#container").fadeIn(2000);
    return promise.promise();
};

var fadeIn2 = function(){
    console.log("started fade in 2");
    var promise = $("<h1>test 2</h1>").hide().appendTo("#container").fadeIn(2000);
    return promise.promise();
};

var fadeIn3 = function(){
    console.log("started fade in 3");
    var promise = $("<h1>test 3</h1>").hide().appendTo("#container").fadeIn(2000);
    return promise.promise();
};

var kickoff = $.Deferred();

firstFadeIn = kickoff.then(function(){
    console.log("kickoff");
    return fadeIn1();
});

secondFadeIn = firstFadeIn.then(function(){
    console.log("second fadein");
    return fadeIn2();
});

thirdFadeIn = secondFadeIn.then(function(){
    console.log("third fadein");
    return fadeIn3();
});

kickoff.resolve();
</script>

我希望将上面的代码集成到一个＆＃39; for＆＃39;循环并且可以灵活处理任意数量的数组项。

Answer 1

如果我明白你的意思，也许就是这样。

＆＃13;

var testdata = [1,2,3,4];
var promise;

function fadeIn(fadeNumber) {
    return $("<h1>test "+ fadeNumber +"</h1>").hide().appendTo("#container").fadeIn(2000).promise();
}

testdata.reduce(function(promise, fadeNumber){
  return promise ? promise.then(fadeIn.bind(null, fadeNumber)) : fadeIn(fadeNumber);
}, null);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

＆＃13;

使用Jquery延迟和＆＃39;用于＆＃39;循环以按顺序使用Jquery效果呈现动态数据

1 个答案: