使功能同步工作（等待本地事件被触发）

Question

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

简单示例：

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]);

并将结果处理为（完美：等待）

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

或（备选方案：来自事件处理程序）

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

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

我的目标是使它成为一个单一功能的工作，或者最坏的情况是，定义该功能的一些 load 事件并监听结果，所以我的严格问题是 "is this somehow possible and if it is, how?"

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

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);
});

使功能同步工作（等待本地事件被触发）

Make function work synchronously (wait local events to get fired)

javascript

dom-events

synchronous