Javascript execute code in certain order

Question

In my assignPopups(), I need to call a retrievePopupText() to populate my mouseOverText variable. When it runs, mouseOverText variable shows as undefined in the popup. The popup and lookup works, but I cannot figure out how to get the popup text value populated before showing the popup. Can someone show me how to structure my code to get it to work in the correct order? My lookup is hard coded right now, but I will be changing that to work for many links when I get this working.

var mouseOverText;

function assignPopups(selector) {
    $(selector).hover(
        function (b) {
            if ($(this).attr('title')) {
                $(this).data('title', $(this).attr('title'));
                $(this).removeAttr('title');
            }

            if ($(this).data('title')) {
                var bkgColor = $(this).closest("td").css("background-color");

                rgb2hex(bkgColor);

                if (bkgColor === null || bkgColor === undefined) {
                    bkgColor = "#4aacc5";
                }

                var Definitions;

                retrievePopupText("data/definitions.json", 'LinkID', 'a2');

                var html = '<div id="titlePopup" class="tooltip info" style="background-color:' + bkgColor + '; display: block; top: '
                    + (b.pageY + 10)
                    + 'px; left: '
                    + (b.pageX + 20)
                    + 'px;">'
                    + '<span id="temp">' + mouseOverText + '</span>'
                    + '</div>';

                timerPopup = setTimeout(function () {
                    $('div#titlePopup').remove();
                    $('body').append(html);
                }, 800);
            }
        },
        function () {
            clearTimeout(timerPopup);
            $('div#titlePopup').remove();
        });
}


function retrievePopupText(path, key, id) {
    var item;

    $.getJSON(path)

    .done(function (data) {
        if (!data) {
            return
        }
        $.each(data.Definitions, function (i, val) {
            if (val.LinkID === id) {
                mouseOverText = val;
            }
        })
    })
    .then(function (data) {
    })
    .fail(function (e) {
    });
}

Answer 1

Call your assignPopups method from within your done callback:

var mouseOverText;

function assignPopups(selector) {
    $(selector).hover(
        function (b) {
            if ($(this).attr('title')) {
                $(this).data('title', $(this).attr('title'));
                $(this).removeAttr('title');
            }

            if ($(this).data('title')) {
                var bkgColor = $(this).closest("td").css("background-color");

                rgb2hex(bkgColor);

                if (bkgColor === null || bkgColor === undefined) {
                    bkgColor = "#4aacc5";
                }

                var Definitions;

                retrievePopupText("data/definitions.json", 'LinkID', 'a2');

                var html = '<div id="titlePopup" class="tooltip info" style="background-color:' + bkgColor + '; display: block; top: '
                    + (b.pageY + 10)
                    + 'px; left: '
                    + (b.pageX + 20)
                    + 'px;">'
                    + '<span id="temp">' + mouseOverText + '</span>'
                    + '</div>';

                timerPopup = setTimeout(function () {
                    $('div#titlePopup').remove();
                    $('body').append(html);
                }, 800);
            }
        },
        function () {
            clearTimeout(timerPopup);
            $('div#titlePopup').remove();
        });
}


function retrievePopupText(path, key, id) {
    var item;

    $.getJSON(path)

    .done(function (data) {
        if (!data) {
            return
        }
        $.each(data.Definitions, function (i, val) {
            if (val.LinkID === id) {
                mouseOverText = val;
            }
        })
        assignPopups('.your-selector'); // e.g. here
    })
    .then(function (data) {
    })
    .fail(function (e) {
    });
}

Answer 2

You need to make the call using $.ajax() to it synchronously, like this:

$.ajax({
  url: 'data/definitions.json',
  dataType: 'json',
  async: false,
  success: function(data) {
    //stuff
    //...
  }
});

$.getJSON is asynchronous, meaning it runs independently of your program. Basically, your code is expecting something when it's not loaded and ready.

Once your call gets into the success function, then do all your popup handling below the original retrievePopupText function;