Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Synchronization problem #777

Open
ci-bus opened this issue Aug 21, 2024 · 0 comments
Open

Synchronization problem #777

ci-bus opened this issue Aug 21, 2024 · 0 comments

Comments

@ci-bus
Copy link

ci-bus commented Aug 21, 2024

I have some functions that create SVG elements, for example lines, these functions return the last position x, y. When I pass x and y from one function to another it does not update the x and y values, however if I put a console log in between or encapsulate the call within an IIFE this works fine, there is really a problem here

OSX 14.6.1 (23G93)
Chrome version: 127.0.6533.120 (Build oficial) (arm64)

  function lineToRight(svg, x, y, size, color) {
      let x2 = x + size;
      let y2 = y;
      pintarLinea(svg, x, y, x2, y2, color);
      return [x2, y2];
  }

  function lineToLeft(svg, x, y, size, color) {
      let x2 = x - size;
      let y2 = y;
      pintarLinea(svg, x, y, x2, y2, color);
      return [x2, y2];
  }

  function lineToUp(svg, x, y, size, color) {
      let x2 = x;
      let y2 = y - size;
      pintarLinea(svg, x, y, x2, y2, color);
      return [x2, y2];
  }

  function lineToDown(svg, x, y, size, color) {
      let x2 = x;
      let y2 = y + size;
      pintarLinea(svg, x, y, x2, y2, color);
      return [x2, y2];
  }

  function drawNutHole(x, y, color) {
      const svg = document.getElementById("idSvgElement");
      [x, y] = lineToDown(svg, x, y, 2, color);
      [x, y] = lineToLeft(svg, x, y, 2, color);
      [x, y] = lineToDown(svg, x, y, 3, color);
      [x, y] = lineToRight(svg, x, y, 3, color);
      [x, y] = lineToUp(svg, x, y, 3, color);
      [x, y] = lineToLeft(svg, x, y, 2, color);
      [x, y] = lineToUp(svg, x, y, 2, color);
  }
  drawNutHole(10, 10, 'red')

This doesn't work well, the x and y variables are not updated

  function drawNutHole(x, y, color) {
      const svg = document.getElementById("idSvgElement");
      [x, y] = lineToDown(svg, x, y, 2, color);
      console.log(x, y);
      [x, y] = lineToLeft(svg, x, y, 2, color);
      console.log(x, y);
      [x, y] = lineToDown(svg, x, y, 3, color);
      console.log(x, y);
      [x, y] = lineToRight(svg, x, y, 3, color);
      console.log(x, y);
      [x, y] = lineToUp(svg, x, y, 3, color);
      console.log(x, y);
      [x, y] = lineToLeft(svg, x, y, 2, color);
      console.log(x, y);
      [x, y] = lineToUp(svg, x, y, 2, color);
      console.log(x, y);
  }
  drawNutHole(10, 10, 'red')

Now it works fine, but the code is practically the same, I think there is an evaluation problem.

It also works well if instead of the console.log I do some operation without repercussions, for example:

  let _ = x + y

It also works fine if I encapsulate the function calls in IIFE, example:

  (() => [x, y] = lineToDown(svg, x, y, 2, color))()

I share the complete script with you

index.html.json

OK
1 1
1

BUG
2 1
2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant