在jQuery .each循环中延迟交互以显示图像

Question

我的背景：我是javascript / jQuery的新手，我发现他们比其他语言更难学。如果这是一个愚蠢的问题，或者我的编程逻辑存在缺陷，请原谅我。

问题：我想扫描目录中的图像文件，返回一个数组。我想通过数组循环更改div中的css背景图像以显示图像。我已经看到许多隐藏和淡化HTML ul / li元素的解决方案。我不想将图像硬编码到HTML中。我的PHP部分没有问题，（我发现PHP很容易学习）。 下面的代码是有效的，但它只显示数组中的最后一个图像，因为它循环而没有暂停。有没有办法暂停jQuery .each？或者首先是我的设计？我知道这个循环只运行一次。一旦我得到了一些代码，我就计划解决这个问题了。我试过延迟，setInterval，setTimeout无济于事。我可能也错误地使用它们。

$(document).ready(function() {
    $(function() {
        $.post('getimagefiles.php', { dir : './images/banner/'},
        function(data) {
            var images = data;
                $.each(images, function(key, val) {
                    arg= 'url(' + val + ')';
                    /*alert(arg);*/
                    $('div#canvas').css("background-image", arg).delay(3000);
                });
        }, 'json');
    });
});