javascript - 2つの機能間の遅延

Question

Cols関数とRows関数の間​​に2000msの遅延が必要です。（最初に列を描画し、次に行を描画する必要があります）

(function() {  
    var cols = $('.cols').hide();  
    var rows = $('.rows').hide();   
    $('.grid').click(function() {  
        var i = 0;  
        var j = 0;
        (function displayCols() {  
            cols.eq(i++).fadeIn(200, displayCols);  
        })();  
        (function displayRows() {  
            rows.eq(j++).fadeIn(100, displayRows);  
        })();  
    });    
})(); 
$('.rows').hide();

フィドル

Answer 1

2番目の関数にタイムアウトを追加できます。

(function() {  
    var cols = $('.cols').hide();  
    var rows = $('.rows').hide();   
    $('.grid').click(function() {  
        var i = 0;  
        var j = 0;
        (function displayCols() {  
            cols.eq(i++).fadeIn(200, displayCols);  
        })();  
        setTimeout(function displayRows() {  
            rows.eq(j++).fadeIn(100, displayRows);  
        },2000);  
    });    
})(); 
$('.rows').hide();

ここで実際の動作を確認してください

もちろん、delay（rows.eq(j++).delay(2000).fadeIn(100, displayRows);）を使用することもできますが、その関数内で遅延させたいものが他にある場合は、それもsetTimeout()遅延します。

Answer 2

使用delay(duration)：

   (function displayRows() {  
        rows.eq(j++).delay(2000).fadeIn(100, displayRows);  
    })();  

http://api.jquery.com/delay/