Javascript 函数 img.onload 没有 return 任何东西（对或错）

Question

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 不会 return 任何东西我需要 return 值 true 或 false。

我想在表单的提交中使用 return 值。谁能帮帮我？

Answer 1

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

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

img.onload 是异步的。这意味着它会在 getMeta() 已经 return 编辑很久之后完成。

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

onsubmit="return getMeta();"

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

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

因此，要修复提交：

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

Answer 2

最后我找到了解决方案，就像 jfriend00 所说的那样，当图像加载成功时手动提交表单，并通过将 return false 添加到 "onsubmit" 来阻止错误的表单提交。谢谢大家

<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;">

Javascript 函数 img.onload 没有 return 任何东西（对或错）

Javascript function img.onload doesn't return anything(true or false)

javascript

return

function

return-value

onload-event