2

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

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

唯一的区别是在第一组代码中，draggable()andtree.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 不在imagesLoaded 的结束标记tree.packery()内

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
4

1 回答 1

2

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

这有什么意义吗？

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

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

不会立即运行。它在内部代码imagesLoaded决定调用它时运行（可能是在所有图像加载后）。

如果您想了解更多关于 javascript 中的回调和闭包（这是与您的问题相关的另一个重要概念），这篇文章似乎是一个好的开始：http: //javascriptissexy.com/understand-javascript-callback-functions-并使用它们/

于 2015-08-22T17:59:59.390 回答