在javascript中分配有些破碎的元素？

Question

http://jsfiddle.net/aRV7q/1/

function multierror(elements, messages){
    while(elements.length > 0){
        box = $(elements.pop());
        errTab = $('#error');

        errTab.fadeOut(10, function(){
            box.css('border', '1px solid red');
            errTab.html(messages.pop());
        }).fadeIn(10);

        errTab.fadeOut(5000, function(){
            box.css('border', '1px solid #cccccc');
            errTab.html('&nbsp');
        }).fadeIn(1000);
    }
} 

这是我正在尝试运行的函数，它应该淡化$（'＃error'）上的一些消息并突出显示我在表单中的一些输入框。 消息在消息变量上，输入框的#name在元素变量上。

但是发生的事情是消息被弹出并正确显示，但是选中要突出显示的元素总是相同的，尽管当while循环迭代时总是会弹出一个项目，所以我想一旦设置，变量框永远不会被重新分配，但我认为没有理由。

有什么想法吗？

Answer 1

这是因为fadeOut具有异步回调，当while循环已经传递给数组的最后一个元素时调用。

一种可能的解决方案是添加一个闭包，它将保留box每个值以供将来回调：

while (elements.length > 0) {
    (function(box) {
        var errTab = $('#error');

        errTab.fadeOut(10, function() {
            box.css('border', '1px solid red');
            errTab.html(messages.pop());
        }).fadeIn(10);

        errTab.fadeOut(5000, function() {
            box.css('border', '1px solid #cccccc');
            errTab.html('&nbsp');
        }).fadeIn(1000);
    })($(elements.pop()));
}

演示： http ： //jsfiddle.net/aRV7q/5/