Question

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

在第一组代码中，我可以拖放元素，并且在拖动时仍然可以在Packery流中使用它们，这是object.Rotate()行的结果。在第二个代码中，这不起作用，这意味着当我拖动元素时，它们不会按顺序回退。

唯一的区别是，在第一组代码中，tree.packery()和draggable()方法放在imagesLoaded的结束标记中。困扰我的是为什么有必要让tree.packery()工作？

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

tree.packery()

在imagesLoaded的结束标记内

2 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 不

tree.packery()

Answer 1

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/

了解结束标记的位置

1 个答案: