如何让JavaScript等待变量加载？视频弹窗位置异常求助

Hey there, let's tackle this coordinate problem you're facing with your video popups. Since your text and image popups work perfectly, the root issue is almost certainly that your code is trying to use the x and y values before they're fully resolved or the SVG elements finish rendering. Here are actionable solutions tailored to your scenario:

1. Wait for the SVG to Fully Render #

$(document).ready() only waits for the DOM to be parsed, not for dynamic assets like SVGs to finish rendering. If your diagram is an SVG element, hook into its load event to ensure coordinates are accurate:

(function (diagram) {
  $(document).ready(function () {
    // Wait for the SVG to finish loading/rendering first
    $(diagram).on('load', function() {
      var diagramData = window.svgpublish.diagramData;
      $.each(diagramData, function (shapeId, shapeData) {
        var props = shapeData.props;
        // Now safely access shapeData.x and shapeData.y here
        // Rest of your video popup creation logic...
      });
    });
  });
})(yourDiagramElement);

2. Ensure diagramData is Fully Loaded #

If window.svgpublish.diagramData is fetched asynchronously (e.g., via an API call), your code might run before the data is ready. Wrap your processing logic in a callback that triggers only when the data is available:

(function (diagram) {
  $(document).ready(function () {
    // Helper to process data once it's loaded
    function processDiagramData(data) {
      $.each(data, function (shapeId, shapeData) {
        var props = shapeData.props;
        // Use x/y coordinates to position your video popup
      });
    }

    // Check if data is already loaded, or wait for it
    if (window.svgpublish && window.svgpublish.diagramData) {
      processDiagramData(window.svgpublish.diagramData);
    } else {
      // If data loads via an event, listen for it
      $(document).on('diagramDataLoaded', function() {
        processDiagramData(window.svgpublish.diagramData);
      });
    }
  });
})(yourDiagramElement);

3. Use requestAnimationFrame for DOM Sync #

If your coordinates depend on calculated DOM positions (e.g., using offset() or position()), delay execution until the browser finishes a repaint to get accurate values:

(function (diagram) {
  $(document).ready(function () {
    var diagramData = window.svgpublish.diagramData;
    $.each(diagramData, function (shapeId, shapeData) {
      // Wait for the browser to finish rendering before grabbing coordinates
      requestAnimationFrame(function() {
        var $targetShape = $('#' + shapeId); // Match shapeId to SVG element ID
        var shapePosition = $targetShape.position();
        var popupX = shapePosition.left;
        var popupY = shapePosition.top;
        // Create and position your video popup here
      });
    });
  });
})(yourDiagramElement);

4. Add Guard Clauses for Unresolved Coordinates #

Sometimes coordinates might load incrementally. Add checks to retry processing if x/y are undefined:

(function (diagram) {
  $(document).ready(function () {
    var diagramData = window.svgpublish.diagramData;

    function processShape(shapeId, shapeData) {
      if (typeof shapeData.x === 'undefined' || typeof shapeData.y === 'undefined') {
        // Retry after a short delay if coordinates aren't ready
        setTimeout(() => processShape(shapeId, shapeData), 100);
        return;
      }
      // Proceed with video popup creation using valid x/y values
    }

    $.each(diagramData, processShape);
  });
})(yourDiagramElement);

The core fix here is to delay your video popup initialization until you're 100% sure the coordinates are available. Since text/image popups work, this is almost certainly a timing mismatch specific to how video popups are initialized or how their target coordinates are fetched.

内容的提问来源于stack exchange，提问作者brentfraser