0

私は配列を持っています、それは4つの子配列を持っています、私は各配列からデータを取得しようとしていますが、配列からは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

4

1 に答える 1

1

1秒あたり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);
   }
 })();

すべてのアニメーションステップに正確に1秒かかる場合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);
 })();
于 2012-11-19T11:48:24.070 に答える