Question

我有一个数组，它有4个子数组，我试图从每个数组中检索一个scond延迟的数据，以及从数组我需要每个元素重复1秒延迟。

我创建了一个函数，但是数据的顺序不正确，任何人都可以通过这个函数来获得正确的有序数据，并且每个都有1秒的延迟。

我也明白我的功能是什么更大。任何给我很短的方法来达到同样的结果。

功能：

var ar = [

    [
        Object= { el:'li',  x:0,  y:294},
        Object= { el:'li',  x:150,  y:294},
        Object= { el:'li',  x:300,  y:294}
    ],

    [
        Object= { el:'li',  x:0,  y:196},
        Object= { el:'li',  x:150, y:196},
        Object= { el:'li',  x:300, y:196}
    ],

    [
        Object= { el:'li',  x:0,  y:98},
        Object= { el:'li',  x:150,  y:98},
        Object= { el:'li',  x:300,  y:98}
    ],

    [
        Object= { el:'li',  x:0,  y:0},
        Object= { el:'li',  x:150,  y:0},
        Object={ el:'li',  x:300,  y:0}
    ]

]

    var length = ar.length;

for(i=0;i<length;i++){

    (function(i){

 setTimeout(function(){

     var minLength = ar[i].length;

     for(j=0;j<minLength;j++){
         (function(d){
             setTimeout(function(j){
                 console.log(ar[d][d])
             },1000*d)             

         })(j)
     }

    },2000*i)


    })(i)
}

我只是安慰结果。

jsfiddle

Answer 1

如果你想每秒选择一个元素，你可以链接回调。在每个元素之后，为行中的下一个元素设置动画，或者，如果没有，则为下一个（非空）行中的第一个设置动画。这样做的好处是任何延迟都会传播到后续动画：

var ar /* = ... */;

var i = 0;
var j = 0;

(function next(){
   console.log(ar[i][j]);
   j++;
   while(ar[i] && !ar[i][j]){ //can be optimised if every row has at least one element
     i++;
     j=0;
   }
   if(ar[i]){
     setTimeout(next);
   }
 })();

如果每个动画步骤只需要一秒钟，那么最好将next附加到动画的终结处理程序，以确保动画不会重叠（jQuery支持）。

(function next(){
   j++;
   while(ar[i] && !ar[i][j]){ //can be optimised if every row has at least one element
     i++;
     j=0;
   }
   $(/*...*/).animate({/*...*/}, 1000, ar[i] ? next : null);
 })();

使用Jquery循环 - 在检索数据时，缺少顺序

1 个答案: