Safari: Unable to retrieve parameters of an async function

Question

I just made a function that displays a dialog on the page in Javascript, this function is asynchronous because it loads the dialog which is a page in PHP. However, to display the message I need to pass parameters. This function works very well, but does not work at all on Safari, when I display the parameters, on Safari it returns "undefined", while on MS Edge, it returns the parameter values. I tried with another non-asynchronous function, and it displays parameters fine. Do you think Safari doesn't handle parameters for async functions or am I doing it wrong? Thank you very much to the people who will help me. (Sorry for my bad English).

Function :

async function openDialogInfo(title, message, button) {
  alert(title + ' ' + message + ' ' + button);
  var title = (typeof title !== 'undefined') ? encodeURI(title) : 'Information';
  var message = (typeof message !== 'undefined') ? encodeURI(message) : 'Error retrieving message !';
  var button = (typeof button !== 'undefined') ? encodeURI(button) : 'Ok';
  if (title.length >= 3 && message.length >= 5 && button.length >= 3) {
    if (screen.width >= 720) {
      $("#out-popup-e").css({
        'opacity': '0'
      }).show();
    } else {
      $("#out-popup-e").show();
    }
    var params = `title=${title}&message=${message}&bouton=${button}`;
    var resp = await fetch('../../../popup/popup_ecars_info.php', {
      method: "POST",
      body: params,
      headers: {
        "Content-type": 'application/x-www-form-urlencoded'
      }
    });
    var out = await resp.text();
    if (resp.status == '200') {
      if (screen.width >= 720) {
        $("#out-popup-e").animate({
          'opacity': '1'
        }, 400).html(out);
      } else {
        $("#out-popup-e").html(out);
        $(".center-popup").css({
          'bottom': '-700px'
        }).animate({
          'bottom': '0'
        }, 400);
      }
    } else {
      console.error('Error Message 2');
    }
  } else {
    console.error('Error message 1');
  }
}

<button class="action" onclick="openDialogInfo('HELLO WORLD', 'New message for testing (don\'t work on Safari)')">TEST</button>
<button class="no-action" onclick="autreTest('New Message (work)')">New test</button>

The function takes 3 parameters, you're only calling it with 2 arguments. So `button` will be undefined. — Barmar, Jun 06 '22 at 16:35
What is `autreTest()`? If it's not relevant, why is it in the HTML snippet? — Barmar, Jun 06 '22 at 16:37
I was able to reproduce this. In Safari the alert is `undefined undefined undefined` instead of `HELLO WORLD New message for testing (don't work on Safari) undefined` — Barmar, Jun 06 '22 at 16:40
@Barmar likely caused by hoisting the variables with the same name. Somewhat related (not _entirely_): https://stackoverflow.com/questions/3725546/why-variable-hoisting-after-return-works-on-some-browsers-and-some-not — robertklep, Jun 06 '22 at 16:45
@robertklep Yes, looks similar. There's also a known issue with nested functions defined inside `if`. — Barmar, Jun 06 '22 at 16:50
@Barmar This function just display an `alert()` with the parameters. — Jojo_14, Jun 07 '22 at 18:38
I understand. The problem has to do with the scope and initialization of hoisted variables. — Barmar, Jun 07 '22 at 18:59

score 1 · Accepted Answer · answered Jun 06 '22 at 16:52

The problem is that you're declaring new variables with the same names as the parameters. Since they're declared with var the declarations are hoisted to the top of the function, and the initial undefined value are overriding the parameters.

Either use different variables or just reassign them rather than re-declaring them.

async function openDialogInfo(title, message, button) {
  alert(title + ' ' + message + ' ' + button);
  title = (typeof title !== 'undefined') ? encodeURI(title) : 'Information';
  message = (typeof message !== 'undefined') ? encodeURI(message) : 'Error retrieving message !';
  button = (typeof button !== 'undefined') ? encodeURI(button) : 'Ok';
  if (title.length >= 3 && message.length >= 5 && button.length >= 3) {
    if (screen.width >= 720) {
      $("#out-popup-e").css({
        'opacity': '0'
      }).show();
    } else {
      $("#out-popup-e").show();
    }
    var params = `title=${title}&message=${message}&bouton=${button}`;
    var resp = await fetch('../../../popup/popup_ecars_info.php', {
      method: "POST",
      body: params,
      headers: {
        "Content-type": 'application/x-www-form-urlencoded'
      }
    });
    var out = await resp.text();
    if (resp.status == '200') {
      if (screen.width >= 720) {
        $("#out-popup-e").animate({
          'opacity': '1'
        }, 400).html(out);
      } else {
        $("#out-popup-e").html(out);
        $(".center-popup").css({
          'bottom': '-700px'
        }).animate({
          'bottom': '0'
        }, 400);
      }
    } else {
      console.error('Error Message 2');
    }
  } else {
    console.error('Error message 1');
  }
}

<button class="action" onclick="openDialogInfo('HELLO WORLD', 'New message for testing (don\'t work on Safari)')">TEST</button>
<button class="no-action" onclick="autreTest('New Message (work)')">New test</button>

Safari: Unable to retrieve parameters of an async function

1 Answers1