javascript - 使功能同步工作(等待本地事件被触发)

Question

我在 JavaScript 逻辑方面遇到问题。当我们有一个函数需要来自事件处理程序的数据来生成结果时，是否有可能让该数据恢复运行？例如，如果我们在内部调用 Image() 对象或 FileReader() 并等待其 load 事件被触发以生成正确的返回结果。

简单的例子:

function imageSize(filename) {
  funcResult = false;
  var img = new Image();
  img.onload = function() {
    myResult = { 
      width: img.width,
      height: img.height
      }
    }
  img.src = filename;
  return funcResult;
}

当然，它不起作用，因为 load 在函数已经执行后异步触发。但是是否有一些解决方法可以使函数停止并收听，这是我的主要目标。

或者更复杂的示例(出于同样的原因也无法工作)。

function getImageSize(file) {
  res = false;
  if (window.FileReader) {
    var fileReader = new FileReader();
    fileReader.onload = function() {
      var img = new Image();
      img.onload = function() {
        res = {
          width  : img.width,
          height : img.height
          };
        }
      img.src = this.result;
      }
    fileReader.readAsDataURL(file);
  }
  return res;
}

使用示例:

var imageSize = getImageSize(myFileInput.files[0]);

并将结果处理为(完美:WAITING)

if (!imageSize)
  console.log('error');
else
  console.log(imageSize.width + 'x' + imageSize.height);

或(替代:来自事件处理程序)

imageSize.onload = function() {
  console.log(this.width + 'x' + this.height);
  }

我想让这个作业线性化(同步)​​并等待内部适当的事件处理程序触发，而不是将作业移出功能范围(尤其是不移到全局级别)。

我的目标是使它成为一个单一功能的工作，或者最坏的情况，定义该功能的一些 load 事件并监听结果，所以我的严格问题是“这是否可能并且如果是，怎么办？”

我理解事件是如何运作的，并且很清楚这种方法是错误的，但这只是我在过去几天试图完成的一个例子。

Answer 1

在您的函数中使用回调来获取大小:

function imageSize(filename, callback) {
    funcResult = false;
    var img = new Image();
    img.onload = function() {
        var myResult = { 
            width: img.width,
            height: img.height
        }
        callback(myResult)
    }
    img.src = filename;
}

并使用它:

imageSize("test.jpg", function(sizeAttributes) {
    console.log(sizeAttributes);
});