javascript - 两个函数之间的延迟

Question

我希望 Cols 和 Rows 函数之间有 2000 毫秒的延迟。（应该先绘制列，然后绘制行）

(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

您可以为第二个函数添加超时：

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

在此处查看实际操作

当然，您可以只使用延迟 ( 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/