如何用 PROMISE 打破 Jquery 的每个循环

Question

我的问题是：How to break out of jQuery each Loop

我需要从 jquery $.each() 中退出，但在这种情况下我不能返回 FALSE，因为退出条件正在触发一个将解决延迟的函数。所以我需要退出每一个，但要有一个承诺。

function KillLayer(id) {
    var defer = $.Deferred();
    $.each(vm.get("DeviceData"), function (idx, item) {
        if (item.Type == id) {
            vm.DeviceData.splice(idx, 1); // remove the item from the list
            removeLayer(defer, id)  // delete it from the PouchDB (IDB) database (async)
            return defer.promise();
        }
    });
    defer.resolve(); // layer was not found, so just resolve & return
    return defer.promise();
}

Answer 1

正如您所发现的，您不能在其 each() 循环内从 KillLayer() 返回，因为该上下文中的 return 语句具有不同的含义。

这里有几种不同的方法：

1：使用布尔标志来表示是否发生了删除，并相应地处理 Deferred。

function KillLayer(id) {
    var defer = $.Deferred(), deleted = false;
    $.each(vm.get("DeviceData"), function (idx, item) {
        if (item.Type == id) {
            vm.DeviceData.splice(idx, 1); // remove the item from the list
            removeLayer(defer, id);  // delete it from the PouchDB (IDB) database (async)
            deleted = true;
            return false;//break from each() loop
        }
    });
    return deleted ? defer.promise() : defer().resolve().promise();//return either a promise of deletion or a ready-resolved promise.
}

2：（如果你可以控制removeLayer()）安排removeLayer() 生成并返回它自己的promise，而不是传入一个Deferred。这将允许您将KillLayer() 简化如下：

function KillLayer(id) {
    var deletionPromise;
    $.each(vm.get("DeviceData"), function (idx, item) {
        if (item.Type == id) {
            vm.DeviceData.splice(idx, 1); // remove the item from the list
            deletionPromise = removeLayer(id);  // delete it from the PouchDB (IDB) database (async), and receive back a promise
            return false;//break from each() loop
        }
    });
    return deletionPromise || $.Deferred().resolve().promise(); //return either a promise of deletion from the DB, or a ready-resolved promise
}

虽然只有一条线不同，但我认为第二种方法更清晰。由于removeLayer() 执行异步活动，它应该真正返回它自己的promise，而不是依赖传递给它的Deferred。

Answer 2

像这样试试。

objDP = null;  // To get Deferred’s Promise object.

$.each(vm.get("DeviceData"), function (idx, item) {
    if (item.Type == id) {
        vm.DeviceData.splice(idx, 1); // remove the item from the list
        removeLayer(defer, id)  // delete it from the PouchDB (IDB) database (async)
        objDP = defer.promise();
        return false;
    }
});

Answer 3

这不会从每个循环中中断，但它会使以下迭代什么都不做：

function KillLayer(id) {
    var defer = $.Deferred();
    var result = null;
    $.each(vm.get("DeviceData"), function (idx, item) {
        if (!result && item.Type == id) {
            vm.DeviceData.splice(idx, 1); // remove the item from the list
            removeLayer(defer, id)  // delete it from the PouchDB (IDB) database (async)
            result = defer.promise();
        }
    });
    return result || defer.resolve();
}

Answer 4

我独立提出了 Beetroots 的答案 #1。首先，我意识到循环通过 $each() 并从您正在循环的 javascript 数组中删除项目是错误的好方法。我真的应该这样做：

$.each(clone(vm.get("DeviceData")), function (idx, item)` {

其中克隆函数定义为：

function clone(obj) {
    return jQuery.extend({}, obj);
}

function deepClone(obj) {
    return jQuery.extend(true, {}, obj);
}

但就我而言，我不需要额外的保护，所以我只是更新了我的解决方案，如下所示：

function KillLayer(id) {
    var defer = $.Deferred();
    var found = false;
    $.each(vm.get("DeviceData"), function (idx, item) {
        if (item.Type == id) {
            vm.DeviceData.splice(idx, 1);
            Compare();
            dbManifest.LayerInfo = vm.DeviceData.toJSON();
            removeLayer(defer, id)
            found = true;
            return false;
        }
    });
    if (!found) defer.resolve(); // layer was not found, so just resolve & return
    return defer.promise();
}