理解结束标记的位置

Question

我需要帮助理解为什么第一组代码可以工作，而第二组代码不能。

在第一组代码中，我能够拖放元素，并且在拖放时仍然将它们放在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() is not within of 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

Answer 1

imagesLoaded可能是异步的。这意味着当您调用它时，它会立即返回，并继续执行下一行代码。在tree.packery( 'bindUIDraggableEvents', fruit );运行时，完全有可能你传递给imagesLoaded的回调还没有运行，所以tree实际上还没有初始化。

有意义吗?

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

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

没有立即运行。只要imagesLoaded的内部代码决定调用它，它就会运行(这可能是在加载了所有图像之后)。

如果您想更多地了解javascript中的回调和闭包(这是与您的问题相关的另一个重要概念)，这篇文章似乎是一个很好的开始:http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/