Javascript 函数 img.onload 不返回任何内容（真或假）

Posted 2023-03-16

【中文标题】Javascript 函数 img.onload 不返回任何内容（真或假）

【英文标题】：Javascript function img.onload doesn't return anything(true or false)

【发布时间】：2016-08-17 23:03:44

【问题描述】：

function getMeta() 
  var img = new Image();
  var verif = true;
  img.onload = function() 
    if (this.width != 468 && this.height != 60) 
      alert('error : only these image sizes are accepted : 468x60');
      return false;
     else
      alert('loaded successfully');
  ;
  img.onerror = function() 
    alert('error : this is not a valid image');
    return false;
  ;
  img.src = document.getElementById('t1').value;
  return true;

<form action="https://www.paypal.com/cgi-bin/webscr" 
      method="post" target="_blank" id="form1" 
      onsubmit="return getMeta();">

函数 img.onload 不会返回任何内容 我需要一个 true 或 false 的返回值。

我想在表单的 onsubmit 中使用返回值。 谁能帮帮我？

【问题讨论】：

.onload 是异步的，这意味着它会在将来的某个时间被系统调用，您从它返回的任何值都只会返回到系统中，而不是返回到您自己的代码中。

我尝试使用回调，但它对我不起作用.. 但是，我只需要我的代码的解决方案。如果你能帮助我，我会很高兴的。谢谢

@Oriol - 这不是该帖子的直接副本，因为该帖子没有描述如何解决这个特定问题。是的，它描述了为什么不能通过回调或承诺从异步回调返回结果，但它没有解释如何将解决方案应用于异步表单提交。我最初将其标记为一个副本，然后在进一步的评论表单中，OP 意识到其他答案并没有解释如何解决这个问题，所以我重新打开它。你应该重新打开。其他帖子不会为此 OP 提供完整的答案。

@jfriend00 这正是我想说的，谢谢

请不要将此标记为How do I return the response from an asynchronous call 的副本。它已经被标记了两次，然后每次都重新打开，因为该帖子没有描述如何在此处实际解决异步表单提交问题。它确实有助于理解为什么会出现问题，但不能解决这个问题的实际解决方案。

【参考方案1】：

一般参考，你应该去阅读How do I return the response from an asynchronous call?。这描述了获取异步结果的一般问题。读完之后，你会希望理解为什么你不能只从.onload() 返回一个值，并期望它是来自getMeta() 的返回值。但是，该答案本身并不能为您的具体问题提供完整的解决方案。

所以，现在让我们更详细地描述一下您的代码中发生了什么，然后讨论修复它的选项。

img.onload 是异步的。这意味着它会在某个时间结束，在 getMeta() 已经返回很久之后。

与此同时，您正在尝试这样做：

onsubmit="return getMeta();"

这使您看起来像是在尝试使用异步结果来确定表单是否应该提交。那根本不能那样做。异步结果尚不清楚，您的 getMeta() 函数始终返回 true。

您可以重组您的代码，使其永远不会同步提交。您加载图像，并且只有在图像加载时，您才会向用户显示错误或手动提交表单。这有潜在的用户界面问题，因为用户点击提交按钮并且没有立即发生任何事情（因为您正在加载图像以进行验证）。这让用户想知道发生了什么。他们通常会认为它没有用，要么再次按下提交按钮，要么认为它只是坏了。因此，您通常需要围绕此设置一堆 UI 来禁用按钮，提供您正在验证图像的反馈，然后在图像未验证时提供适当的错误消息，并且通常应该在您禁用其他 UI 控件时'正在验证图像，以便用户在您尝试决定是否要提交此表单时不会离开并做其他事情。

所以，修复提交：

在您的 onsubmit 处理程序中，您将始终返回 false，因此表单永远不会立即提交。然后，在onload() 处理程序中（加载图像后），您将手动提交表单或显示错误。

【讨论】：

@Oriol - 如果您是反对者，请重新考虑。您将其标记为 dup 的帖子实际上并没有告诉 OP 如何解决他们的特定问题。它确实描述了一些问题，但不是一个完整的解决方案，这就是为什么我提供了一个试图更直接地解决这个特定问题的答案。

我没有投反对票。我正在考虑是否应该撤回我的近距离投票。

@Oriol - 我最初将它作为同一个问题的副本关闭，但当我意识到其他答案并不能完全告诉 OP 如何解决表单提交问题时，我改变了主意是这里的具体问题。我在答案中添加了有关 that dup 的更多信息作为背景和实际解决方案的贡献者。

@jfriend00 我终于找到了解决方案：else alert('加载成功'); document.getElementById('form1').submit(); ///////////////////////////////////////// ///////////////////////

@kingbla - 由于您在这里看起来可能相对较新，如果您的问题现已得到解答，您可以通过单击对您最有帮助的答案左侧的复选标记向社区表明这一点.这也将为您赢得一些声誉积分，从而在网站上获得更多特权。

【参考方案2】：

最后我找到了解决方案，就像说 jfriend00 在图像加载成功时手动提交表单，并通过在“onsubmit”中添加 return false 来阻止表单提交错误。谢谢大家

<script>
function getMeta()   
    var img = new Image();
    img.onload = function()
        if (this.width != 468 && this.height != 60)
		  alert( 'error : only these image sizes are accepted : 468x60' );
		  return false;
		  
		  else
		  alert( 'loaded successfully' );
		  document.getElementById('form1').submit();
    ;
	img.onerror = function() alert( 'error : this is not a valid image');
	return false;
	 ;
    img.src = document.getElementById('t1').value;
	return true;

</script>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="form1" onsubmit="getMeta(); return false;">