javascript - 了解结束标签的位置

我需要帮助来理解为什么第一组代码有效，而第二组代码无效。

在第一组代码中，我能够拖放元素，并且在拖动时仍将它们放在Packery流中，这是tree.packery()行的结果。在第二个代码中，这是行不通的，这意味着当我拖动元素时，它们不会按顺序退回。

唯一的不同是，在第一组代码中，draggable()和tree.packery()方法放置在imagesLoaded的结束标记内。让我感到困扰的是为什么必须使用tree.packery()才能使它起作用？

1 tree.packery()位于imagesLoaded的结束标记内

var fruit = $('.fruit');

fruits.imagesLoaded(function() {
    var tree = fruits.packery({
        itemSelector: '.fruit',
        columnWidth: 0,
    });

    fruit.draggable();

    tree.packery('bindUIDraggableEvents', fruit); // this line works!
}); // imagesLoaded closing tag at the end

2 tree.packery()不在imagesLoaded的结束标记内

var fruit = $('.fruit');

fruits.imagesLoaded(function() {
    var tree = fruits.packery({
        itemSelector: '.fruit',
        columnWidth: 0,
    });
}); // imagesLoaded closing tag

fruit.draggable();

tree.packery('bindUIDraggableEvents', fruit);
// this line doesn't work this time

最佳答案

imagesLoaded可能是异步的。这意味着当您调用它时，它会立即返回，并继续执行下一行代码。在运行tree.packery( 'bindUIDraggableEvents', fruit );时，传递给imagesLoaded的回调很可能尚未运行，因此实际上树尚未初始化。

有什么意义吗？

重要的是，您作为回调传递给imagesLoaded的代码

var tree = fruits.packery({
    itemSelector: '.fruit',
    columnWidth: 0,
});

没有立即运行。每当imagesLoaded的内部代码决定调用它时，它就会运行（可能是所有图像都加载完之后）。

如果您想了解有关JavaScript中回调和闭包（这是与您的问题相关的另一个重要概念）的更多信息，那么本文似乎是一个不错的开始：http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/