Question: I want a delay of 2000ms between the Cols and Rows function. (The Cols should be drawn first, the Rows second)

```
(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();

```

[Fiddle](http://jsfiddle.net/xFTUB/3/)

Answer: 
You could add a timeout to the second function:

```
(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();

```

See it in action [here](http://jsfiddle.net/xFTUB/4/)

Of course, you could just use delay (`rows.eq(j++).delay(2000).fadeIn(100, displayRows);`), but if there was something else you wanted to delay within that function `setTimeout()` would delay that too.
Use `delay(duration)`:

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

```

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