使用 jQuery Isotope 了解 setTimeout() 和回调

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 中的相应条目是 "resolved"，并且 $.when() 调用确保只有当它们是全部解决了布局是否会更新。

此外，update函数本身现在也是returns一个promise，这样你就可以在整个异步任务完成时同步其他事件。

使用 jQuery Isotope 了解 setTimeout() 和回调

Understanding setTimeout() and callbacks with jQuery Isotope

javascript

jquery

jquery-isotope