for循环和setInterval（）

最近脑子比较迟钝，遇见一个问题，记录下来，如下：
有个数组arr:<code>["1","2","3","4","5"]</code>，然后有个id为<code>box</code>的元素，实现单击屏幕后，按照数组各项顺序，每1秒钟向box中添加数组的一项，jq如何实现。
一开始的写法：

window.onload = function(){
    var arr = ["1","2","3","4","5"],
        arrL = arr.length,
        oBox = $("#box");
    $(document).on("click",function(){
        for(var i = 0; i < arrL; i ++){
            setInterval(function(){
                oBox.append(arrL[i])
            },1000)
        }
    })  
}

写完发现什么都没什么用，才发现跟我所想有很大差异，这样写并不是给for循环设定了每次循环的时间间隔，所以执行添加操作的时候，for循环变量已经最大了。
最后解决办法，不用for循环，代码很简单，如下：

window.onload = function(){
    var arr = ["1","2","3","4","5"],
        arrL = arr.length,
        oBox = $("#box");
    $(document).on("click",function(){
        var i = 0;
        var t = setInterval(function(){
            oBox.append(arr[i]);
            i += 1;
            if(i > arrL - 1){
                clearInterval(t);
            }
        },1000)
    })
}

问题所在：思维限制，很多时候一想到要循环马上就是for，但是有可能根本就用不到。办法总比问题多，所以遇见问题后不应立马就着手做，首先应该想想哪种办法最合适，最简单，最有效。
有关for循环还有一个比较经典的问题，单击<code>ul</code>中每项<code>li</code>，弹出相应<code>li</code>的索引值，留作以后手记。