子函数完成后如何从父函数返回值答案

【问题标题】：How can i return a value from parent function after child function completed子函数完成后如何从父函数返回值
【发布时间】：2019-08-20 13:20:21
【问题描述】：

我正在实现一个简单的验证函数，它应该返回 true/false 取决于图像大小。内部img.onload 函数需要一些时间来执行，所以父checkImagesWidth 应该等待它完成。

代码如下：

checkImagesWidth: function (file, restrictions) {
  var img = new Image()
  img.src = window.URL.createObjectURL(file)
  img.onload = () => {
    window.URL.revokeObjectURL(img.src)
    return (img.naturalWidth >= restrictions.width) || (img.naturalHeight >= restrictions.height)
  }
}

换句话说，这个想法是在checkImagesWidth() 之后获取true/false，并在if 语句中使用这个值，就像一个普通的true/false 值一样。

我试图通过回调、承诺、异步/等待来实现这种方法，但没有成功。这甚至可能吗？

【问题讨论】：

试试：return img.onload = () => ... 或者你可以在函数内部添加一个T/F值赋值给一个变量，并在img.onload执行后返回
@MaxSvid 根本不起作用。
@MaxSvid 它不起作用。 ad 是仅在加载图像时才会执行的事件，因此 checkImagesWidth 将在 onload 执行之前执行并退出。
@MaxSvid 我也在尝试这个。它只是返回一个函数的 (img.onload) 代码。
这样您就可以将函数转换为异步并使用async/await语法或修改函数abit：let y = null; img.onload = () => { window.URL.revokeObjectURL(img.src) y = (img.naturalWidth >= restrictions.width) || (img.naturalHeight >= restrictions.height) } return y

标签： javascript algorithm

【解决方案1】：

onload 是仅在加载图像时执行的事件，因此 checkImagesWidth 将在 onload 执行之前执行并退出。如果您能解释为什么需要 true/false 来返回将有助于正确构建它，那就更好了。

这里有几种方法可以做你想做的事情

首先是回调函数

function callback(boolValue) {
  // do something with it
}

checkImagesWidth: function (file, restrictions, callback) {
  var img = new Image()
  img.src = window.URL.createObjectURL(file)
  img.onload = () => {
    window.URL.revokeObjectURL(img.src)
    callback(img.naturalWidth >= restrictions.width) || (img.naturalHeight >= restrictions.height)
  }
}

第二个可能是承诺

checkImagesWidth: function (file, restrictions, callback) {
  return new Promise(function(resolve, reject) {
    var img = new Image()
    img.src = window.URL.createObjectURL(file)
    img.onload = () => {
      window.URL.revokeObjectURL(img.src)
      if((img.naturalWidth >= restrictions.width) || (img.naturalHeight >= restrictions.height)){
        resolve(true)
      }else {
        reject(false)
      }
    }
  });
}

consumer: function() {
  checkImagesWidth().then(()=>{
    // when it true do something
  }).catch(()=>{
    //false case
  })

}

【讨论】：

感谢您的回答。我更新了帖子并添加了关于“为什么我需要真/假”的解释。
@Andrew 如前所述，无法检查从 checkImagesWidth 函数返回的真/假，因为它包含稍后执行的代码，您必须使用承诺或回调
是的。这就是我所期望的。 :) 无论如何，谢谢你的解释。