只在前一组工作完成后执行循环中的一组工作

Question

我有一些代码完成链中的一组不同的操作。操作集本身在循环中执行。由于我正在处理的系统的性质，操作集需要同步执行(即，在第一组操作完成之前，下一组操作不能执行)。异步执行可能会脱离远程处理器(不在我的控制范围内)，并导致代码失败。现在，我唯一能让它工作的方法就是使用警告框，这真的很蹩脚，也不是一个选择。我试过:

• 使用美元。并将async设置为false
• 使用睡眠功能
• 警告框(在绝望时使用)

这里是代码-有什么想法吗?:

$('input:checked').each(function(index){                        
    //get the item's location id
    var currentInput = $(this).val();
    var copyUser = function(){$.get(urlCopyPrefix + currentInput + urlSuffix);}
    var moveUser = function(){$.get(urlMovePrefix + moveLocation + urlSuffix);}
    var cleanup = function(){
        var newSibling = $('#module-' + moveLocation);
        newSibling.before('<li>New Line</li>');
        alert('done');
    }
    /* --> THIS IS THE CODE IN QUESTION <-- */
    $.when(copyUser()).pipe(moveUser).then(cleanup);
});

Answer 1

必须从函数中返回jqXHR对象:

var copyUser = function(){
        return $.get(urlCopyPrefix + currentInput + urlSuffix);
    },
    moveUser = function(){
        return $.get(urlMovePrefix + moveLocation + urlSuffix);
    };

那么你可以这样做:

$.when( copyUser() ).pipe( moveUser ).then( cleanup );

---

如果你想等待循环中的每一项都完成后再开始下一项，使用:

var $items = $('input:checked'),
    length = $items.length,
    copyUser = function(currentInput)
    {
        return $.get(urlCopyPrefix + currentInput + urlSuffix);
    },
    moveUser = function()
    {
        return $.get(urlMovePrefix + moveLocation + urlSuffix);
    },
    cleanup = function()
    {
        $('#module-' + moveLocation).before('<li>New Line</li>');
    };
function processUser(i)
{
    $.when( copyUser($items.eq(i).val()) ).pipe( moveUser ).then(function()
    {
        cleanup();
        i < length && processUser(++i);
    });
}
processUser(0);

Answer 2

我认为你必须停止使用.each()，因为它会立即运行整个迭代，你不希望这样做。

这里有一种方法可以做到这一点，使用补全函数和局部函数:

function copyMove(moveLocation, urlCopyPrefix, urlMovePrefix, urlSuffix)
    var checked = $('input:checked');
    var index = 0;
    function next() {
        if (index < checked.length) {
            var currentInput = checked.eq(index++).val();
            $.get(urlCopyPrefix + currentInput + urlSuffix, function() {
                $.get(urlMovePrefix + moveLocation + urlSuffix, function() {
                    $('#module-' + moveLocation).before('<li>New Line</li>');
                    next();
                });
            });
         }
    }
    next();
}

或者，使用deferred:

function copyMove(moveLocation, urlCopyPrefix, urlMovePrefix, urlSuffix)
    var checked = $('input:checked');
    var index = 0;
    function copyUser () { 
        var currentInput = checked.eq(index).val();
        return $.get(urlCopyPrefix + currentInput + urlSuffix);
    }
    function moveUser() {
        return $.get(urlMovePrefix + moveLocation + urlSuffix);
    }
    function cleanup() {
        ++index;
        $('#module-' + moveLocation).before('<li>New Line</li>');
        next();
    }
    function next() {
        if (index < checked.length) {
            $.when(copyUser()).pipe(moveUser).then(cleanup);
         }
    }
    next();
}

关于延迟的注意事项:必须传递函数引用，而不是函数调用。这意味着传递函数名时不带父元素。