Веселая ассинхронность javascript-a
 

Привет. Может кто-то сталкивался с подобной проблемой.
Есть код вида:

// запускаем рисование продукта. Продукты все разные, но они состоят из блоков-колонок.
drawProduct(); 
// после того как отрисован продукт нужно вывести кнопку в центре каждой колонки продукта. Соответственно нужны x,y,width,height кнопки.
addButton(); 

function createProductCollumn ()  {
 // createProductCollumn содает колонку
 cols[cols.length]  = new ProductCollumn();
}

// риуем нужный набор колонок 
function drawProduct() {
     createProductCollumn(параметры1);
     createProductCollumn(параметры2);
     ...
}

function addButton() {
    for(var i in productCollumns) {
        new button(productCollumns[i].width .....)
    } 
}

Проблема в том, что продукт рисуется не мгновенно. Пока класс продукта полностью обработает нужную информацию и выведет картинку(уже загруженную по onload) 1 раз из 10, я получаю ошибку "productCollumns[i].width is undefined" во время рисовки кнопки. Как я понимаю JS запустил 2 функции одновременно.

Какой оптимальный способ бороться? Спасибо.

Почему drawProduct выполняется асинхронно?

Все спасибо разобрался. Проблема была не в том. Сори.