Question

试图了解方法排序，setTimeout（）和回调。

一旦setTimeout（）函数完成，我需要调用Isotope method layout()，否则布局关闭，元素重叠。

// <--- CODE

this.timeout = 400;

this.update = function() {
    window.setTimeout(function() {
        $(".item.is-loading").each(function(index) {
            var _time = 100 * index,
                $this = $(this);
            window.setTimeout(function() {
                $this.removeClass("is-loading").find("img").css({
                    width: "100%",
                    height: "auto"
                });
            }, _time);
        })
    }, instance.timeout);

    instance.feed.isotope("layout");
};

// ---> CODE

我可以看到之前正在调用layout（），因为setTimoute（）已经完成它是异步的，但是我不能找到一个很好的方法来解决问题而不使用另一个setTimeout？

Answer 1

你应该能够用jQuery承诺解决这个问题（没有双关语！）：

this.update = function() {

    // immediately create an array of deferred objects, one for
    // each element in the list below
    var defs = $(".item.is-loading").map(function() {
        return $.Deferred();
    }).get();

    window.setTimeout(function() {
        $(".item.is-loading").each(function(index) {
            var _time = 100 * index,
                $this = $(this);
            window.setTimeout(function() {
                $this.removeClass("is-loading").find("img").css({
                    width: "100%",
                    height: "auto"
                });
                defs[index].resolve();   // flag that this deferred task finished
            }, _time);
        })
    }, instance.timeout);

    // once they're all done, update the layout
    return $.when.apply($, defs).then(function() {
        instance.feed.isotope("layout");
    });
};

必须立即创建defs数组，否则$.when进一步调用将无法解决问题。

每次内部setTimeout调用完成后，defs中的相应条目均已“已解决”，而$.when()调用仅在全部时才会确保已解决，布局会更新。

此外，update函数本身现在也返回一个promise，以便您可以在完成整个异步任务时同步其他事件。

使用jQuery Isotope了解setTimeout（）和回调

1 个答案: