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

Sam Holguin 发表于 Dev

山姆·奥尔金（Sam Holguin）

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

setTimeout（）函数完成后，我需要调用Isotope方法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，我想不出一种解决该问题的好方法？

阿尼塔克

您应该可以使用jQuery Promise解决此问题（无双关语！）：

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");
    });
};