Question

在我的assignPopups（）中，我需要调用retrievePopupText（）来填充我的mouseOverText变量。运行时，mouseOverText变量在弹出窗口中显示为undefined。弹出和查找工作，但我无法弄清楚如何在显示弹出窗口之前填充弹出文本值。有人可以告诉我如何构建我的代码，让它以正确的顺序工作？我的查找现在是硬编码的，但是当我开始工作时，我将更改它以用于许多链接。

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

您需要使用$ .ajax（）同步拨打电话，如下所示：

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

$.getJSON是异步的，这意味着它独立于您的程序运行。基本上，当代码没有加载并准备就绪时，你的代码会有所期待。

一旦您的电话进入成功功能，然后在原始retrievePopupText功能下执行所有弹出处理;

Answer 2

在完成的回调中调用assignPopups方法：

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) {
    });
}

Javascript按特定顺序执行代码

2 个答案: