Понимание размещения закрывающих тегов

Question

Мне нужна помощь, чтобы понять, почему работает первый набор кода, а второй код - нет.

В первом наборе кода я могу перетаскивать элементы и все еще иметь их в режиме Packery при перетаскивании, что является результатом линии tree.packery(). Во втором коде это не работает, то есть когда я перетаскиваю элементы, они не возвращаются в порядок.

Единственная разница в том, что в первом наборе кода методы draggable() и tree.packery() размещены в закрывающих тегах imagesLoaded. Что меня беспокоит, почему это необходимо, чтобы сделать работу tree.packery()?

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 

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 

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/