如何让javascript等待变量加载

Question

我有这个代码，我试图操纵但是遇到了一些障碍。

代码为视频创建一个弹出窗口（我有文本和图像代码，它们工作正常）。问题是代码在加载x和y坐标之前继续，因此弹出窗口的位置不在正确的位置。

(function (diagram) { $(document).ready(function () {

    var diagramData = window.svgpublish.diagramData;
    $.each(diagramData, function (shapeId, shapeData) {

        var props = shapeData.Props;
        if (!props)
            return;
        var $shape = $("#" + shapeId);


        // decorate the shape with "hand" cursor
        $shape.css("cursor", "pointer");

        // hide the popover hiding when clicked outside
        $('body').on('click', function (e) {
            $shape.popover('hide');
        });

        $shape.on('click', function (evt) { 
            evt.stopPropagation();
            //***** For Clicking the icon to show the popup ********//
            //$shape.popover('toggle');

        });

        $shape.on('mouseover', function () {
            $(this).attr('filter', 'url(#hover)');
            //***** For Mousing Over the icon to show the popup ********//
            $shape.popover('show');
            //$shape.popover('toggle');
        });


        $shape.on('mouseout', function () {
            $(this).removeAttr('filter');
            //***** For Mousing Out of the icon to hide the popup ********//
            //$shape.popover('toggle');
            $shape.popover('hide');
        });

        $shape.tooltip({
            container: "body",
            //title: props.title + ' - click to open/close'
        });


        // build options for popover: placement function, iframe url from properties
        var options1 = {
            placement: function (context, source) {
                var position = $(source).position();
                if (position.right > 500)
                    return "left";
                if (position.left < 500)
                    return "right";
                if (position.top < 300)
                    return "bottom";
                return "top";
            },
            trigger: "manual",
            container: "html",
            html: true,
            content: ''+
            '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
            '<hr style="margin:5px"> ' +
            '<table border=0 width=400px><tr><td><img src="'+props.Image+'"></img></td><td width=15px></td><td><span class="text-muted small"> ' + props.information1 + '</span></td></tr></table>',
            title: props.title
        };

        var options2 = {
            placement: function (context, source) {
                var position = $(source).position();
                if (position.right > 500)
                    return "left";
                if (position.left < 500)
                    return "right";
                if (position.top < 300)
                    return "bottom";
                return "top";
            },
            trigger: "manual",
            container: "html",
            html: true,
            content: ''+
            '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
            '<hr style="margin:5px">' +
            '<table border=0 width=400px><tr><td><img src="'+props.Image+'"></img></td><td width=10px></td><td><span class="text-muted small"><ul><li> ' + props.information1 + '</li><li> ' + props.information2 + '</li></ul></span></td></tr></table>',
            title: props.title
        };

        var options3 = {    
            placement: function (context, source) {
                var position = $(source).position();
                if (position.right > 500)
                    return "left";
                if (position.left < 500)
                    return "right";
                if (position.top < 300)
                    return "bottom";
                return "top";
            },
            trigger: "manual",
            container: "html",
            html: true,
            content: ''+
            '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
            '<hr style="margin:5px">' +
            '<table border=0 width=400px><tr><td><img src="'+props.Image+'"></img></td><td width=10px></td><td><span class="text-muted small"><ul><li> ' + props.information1 + '</li><li> ' + props.information2 + '</li><li> ' + props.information3 + '</li></ul></span></td></tr></table>',
            title: props.title
        };

        var options4 = {    
            placement: function (context, source) {
                var position = $(source).position();
                if (position.right > 500)
                    return "left";
                if (position.left < 500)
                    return "right";
                if (position.top < 300)
                    return "bottom";
                return "top";
            },
            trigger: "manual",
            container: "html",
            html: true,
            content: ''+
            '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
            '<hr style="margin:5px">' +
            '<table border=0 width=400px><tr><td><img src="'+props.Image+'"></img></td><td width=10px></td><td><span class="text-muted small"><ul><li> ' + props.information1 + '</li><li> ' + props.information2 + '</li><li> ' + props.information3 + '</li><li> ' + props.information4 + '</li></ul></span></td></tr></table>',
            title: props.title
        };

        var options5 = {
            placement: function (context, source) {
                var position = $(source).position();
                if (position.right > 500)
                    return "left";
                if (position.left < 500)
                    return "right";
                if (position.top < 300)
                    return "bottom";
                return "top";
            },
            trigger: "manual",
            container: "html",
            html: true,
            content: ''+
            '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
            '<hr style="margin:5px">' +
            '<table border=0 width=400px><tr><td><img src="'+props.Image+'"></img></td><td width=10px></td><td><span class="text-muted small"><ul><li> ' + props.information1 + '</li><li> ' + props.information2 + '</li><li> ' + props.information3 + '</li><li> ' + props.information4 + '</li><li> ' + props.information5 + '</li></ul></span></td></tr></table>',
            title: props.title
        };

        var options6 = {    
            placement: function (context, source) {
                var position = $(source).position();
                if (position.right > 500)
                    return "left";
                if (position.left < 500)
                    return "right";
                if (position.top < 300)
                    return "bottom";
                return "top";
            },
            trigger: "manual",
            container: "html",
            html: true,
            content: ''+
            '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
            '<hr style="margin:5px">' +
            '<table border=0 width=400px><tr><td><img src="'+props.Image+'"></img></td><td width=10px></td><td><span class="text-muted small"><ul><li> ' + props.information1 + '</li><li> ' + props.information2 + '</li><li> ' + props.information3 + '</li><li> ' + props.information4 + '</li><li> ' + props.information5 + '</li><li> ' + props.information6 + '</li></ul></span></td></tr></table>',
            title: props.title
        };

var ImageOption = {
    placement: function (context, source) {
        var position = $(source).position();
        if (position.right > 500)
            return "left";
        if (position.left < 500)
            return "right";
        if (position.top < 300)
            return "bottom";
        return "top";
    },
    trigger: "manual",
    container: "html",
    html: true,
    content: '<img src="'+props.image_path+'"></img>'
};


var VideoOption = {

    placement: function () {
        var imageXcoord = event.clientX;
        var imageYcoord = event.clientY;

console.log(imageXcoord);
console.log(imageYcoord);

//alert(imageXcoord + " x " + imageYcoord);
if (imageYcoord < 300) {
    return "bottom";
        return "top";
}
if (imageXcoord > 500) {
    //alert("yup, more than 500");
    return "left";
}
if (imageXcoord < 500) {
    return "right";
}

  },
    trigger: "Manual",
    container: "html",
    html: true,
    content: '<video autoplay>' +
    '<source src="'+props.video_path+'" type="video/mp4"></source>' +
    '</video>'
};

// create the popover for the shape  
if (props.infoItems == 1){  
        $shape.popover(options1);
};
if (props.infoItems == 2){  
        $shape.popover(options2);
};
if (props.infoItems == 3){  
        $shape.popover(options3);
};
if (props.infoItems == 4){  
        $shape.popover(options4);
};
if (props.infoItems == 5){  
        $shape.popover(options5);
};
if (props.infoItems == 6){  
        $shape.popover(options6);
};

if (props.eB_Image == "yes"){
//alert("we have an image");
        $shape.popover(ImageOption);
};

if (props.eB_Video == "yes"){
//alert("we have a video");
        $shape.popover(VideoOption);

};


    });
});
 })(window.svgpublish);

当我添加某种警报时，弹出窗口会放在正确的位置。有没有办法在加载坐标之前不进行前进？