Javascript 如何执行某些函数

我有一些代码片段

  public onChange(event: Event) {
      this.loadFiles();
  };


  loadFiles() {
    let files = event.target['files'];
    for (var i = 0; i < files.length; i++) {
      if (FileReader && files && files.length) {
        let fileReader = new FileReader();
        fileReader.onload = () => {
          let infoFile: string = fileReader.result;
          this.list.push(infoFile);
        };
        fileReader.readAsDataURL(files[i]);
      }
    }
  }

  loadImage() {
    this.imageService.setImage(this.list);
    this.isClicked = true;
    this.imageLoadedEvent.emit(this.isClicked);
  }

但这段代码在每个迭代循环中执行。在

onChange（）函数中执行
loadImage（）
函数是否可能只有一个？我也尝试过类似的东西

    public onChange(event: Event) {
    this.loadFiles();
    let promise = new Promise(resolve => {
      this.loadFiles();
      console.log(this.list.length);
      resolve('success');
    });
    promise.then(response => {
      console.log(this.list.length);
      //this.loadImage();
    });
  };

但是保证执行速度比加载文件（）快，长度等于0。
我不明白为什么要在一次更改后执行加载映像，但是如果需要，可以轻松地执行，如果放入此代码

public onChange(event: Event) {
  this.loadFiles();
  setTimeout(loadImage, 100);
};

但是我看到，您希望在填充this.list之后执行loadImage。如果您希望使用promise，您可以使用以下方式：

public onChange(event: Event) {
  let myPromise = new Promise(this.loadFiles);
  myPromise.then(this.loadImage).catch(function(err) {
    console.log(err);
  });
};


loadFiles(resolve: () => void, reject: (_: string) => void) {
  let files = event.target['files'];
  for (var i = 0; i < files.length; i++) {
    if (FileReader && files && files.length) {
      let fileReader = new FileReader();
      fileReader.onload = () => {
        let infoFile: string = fileReader.result;
        this.list.push(infoFile);
        resolve();
      };
      try {
        fileReader.readAsDataURL(files[i]);
      } catch (err) {
        reject(err);
      }
    }
  }
}

loadImage() {
  this.imageService.setImage(this.list);
  this.isClicked = true;
  this.imageLoadedEvent.emit(this.isClicked);
}

public onChange(event: Event) {
  this.loadFiles();
};


loadFiles() {
  let files = event.target['files'];
  for (var i = 0; i < files.length; i++) {
    if (FileReader && files && files.length) {
      let fileReader = new FileReader();
      fileReader.onload = () => {
        let infoFile: string = fileReader.result;
        this.list.push(infoFile);
        if (this.list.length === files.length) {
          this.loadImage()
        }
      };
      fileReader.readAsDataURL(files[i]);
    }
  }
}

loadImage() {
  this.imageService.setImage(this.list);
  this.isClicked = true;
  this.imageLoadedEvent.emit(this.isClicked);
}

public onChange（事件：事件）{
让myPromise=newpromise（this.loadFiles）；
myPromise.then（this.loadImage）.catch（函数（err）{
控制台日志（err）；
});
};
加载文件（解析：（）=>void，拒绝：（（字符串）=>void）{
让files=event.target['files']；
对于（var i=0；i{
让infoFile:string=fileReader.result；
this.list.push（infoFile）；
解决（）；
};
试一试{
readAsDataURL（files[i]）；
}捕捉（错误）{
拒绝（错误）；
}
}
}
}
loadImage（）{
this.imageService.setImage（this.list）；
this.isClicked=true；
this.imageLoadedEvent.emit（this.isClicked）；
}

我想您需要一个方法，首先读取所有文件，然后使用该列表调用loadImage方法，所以我可能会这样做：

public onChange(event: Event) {
  let myPromise = new Promise(this.loadFiles);
  myPromise.then(this.loadImage).catch(function(err) {
    console.log(err);
  });
};


loadFiles(resolve: () => void, reject: (_: string) => void) {
  let files = event.target['files'];
  for (var i = 0; i < files.length; i++) {
    if (FileReader && files && files.length) {
      let fileReader = new FileReader();
      fileReader.onload = () => {
        let infoFile: string = fileReader.result;
        this.list.push(infoFile);
        resolve();
      };
      try {
        fileReader.readAsDataURL(files[i]);
      } catch (err) {
        reject(err);
      }
    }
  }
}

loadImage() {
  this.imageService.setImage(this.list);
  this.isClicked = true;
  this.imageLoadedEvent.emit(this.isClicked);
}

public onChange(event: Event) {
  this.loadFiles();
};


loadFiles() {
  let files = event.target['files'];
  for (var i = 0; i < files.length; i++) {
    if (FileReader && files && files.length) {
      let fileReader = new FileReader();
      fileReader.onload = () => {
        let infoFile: string = fileReader.result;
        this.list.push(infoFile);
        if (this.list.length === files.length) {
          this.loadImage()
        }
      };
      fileReader.readAsDataURL(files[i]);
    }
  }
}

loadImage() {
  this.imageService.setImage(this.list);
  this.isClicked = true;
  this.imageLoadedEvent.emit(this.isClicked);
}

public onChange（事件：事件）{
这是loadFiles（）；
};
加载文件（）{
让files=event.target['files']；
对于（var i=0；i{
让infoFile:string=fileReader.result；
this.list.push（infoFile）；
if（this.list.length==files.length）{
这是loadImage（）
}
};
readAsDataURL（files[i]）；
}
}
}
loadImage（）{
this.imageService.setImage（this.list）；
this.isClicked=true；
this.imageLoadedEvent.emit（this.isClicked）；
}

注意：我没有太多地使用类型脚本，所以可能参数不同。
这是我为使用承诺而辞职的解决方案

  public file_srcs: string[] = [];
  loadedFiles: number = 0;
  allFiles: number = 0;
  list: string[] = [];
  isClicked: boolean = false;
  @Output() imageLoadedEvent = new EventEmitter < boolean > ();

  constructor(private imageService: ImageService) {}

  ngOnInit() {}

  public onChange(event: Event) {
    this.loadFiles();
  };

  loadFiles() {
    let files = event.target['files'];
    let promises = [];
    this.allFiles = files.length;

    for (var i = 0; i < files.length; i++) {
      let fileReader = new FileReader();
      fileReader.onload = () => {
        let infoFile: string = fileReader.result;
        console.log(infoFile);
        this.list.push(infoFile);
        this.loadedFiles++;
        this.loadImage();
      }
      if (fileReader && files && files.length) {
        fileReader.readAsDataURL(files[i]);
      }
    }
  }

  loadImage() {
    if (this.loadedFiles == this.allFiles) {
      this.imageService.setImage(this.list);
      this.isClicked = true;
      this.imageLoadedEvent.emit(this.isClicked);
    }
  }

public file_srcs:string[]=[]；
loadedFiles:编号=0；
所有文件：编号=0；
列表：字符串[]=[]；
isClicked:boolean=false；
@Output（）imageLoadedEvent=neweventEmitter（）；
构造函数（私有imageService:imageService）{}
ngOnInit（）{}
公共onChange（事件：事件）{
这是loadFiles（）；
};
加载文件（）{
让files=event.target['files']；
让承诺=[]；
this.allFiles=files.length；
对于（var i=0；i{
让infoFile:string=fileReader.result；
console.log（infoFile）；
this.list.push（infoFile）；
这个.loadedFiles++；
这是loadImage（）；
}
if（fileReader&&files&&files.length）{
readAsDataURL（files[i]）；
}
}
}
loadImage（）{
if（this.loadedFiles==this.allFiles）{
this.imageService.setImage（this.list）；
this.isClicked=true；
this.imageLoadedEvent.emit（this.isClicked）；
}
}
似乎需要异步流。默认情况下，它的同步流。虽然我会建议您使用一些异步库。旁注：如果（FileReader）在没有FileReader的情况下会抛出错误，我也会更改ImageServices在app.module.ts中设置为全局，因为当我将其添加到component.ts时，服务被重新加载，数组变为空。我会更改方法，并且不使用promise only add if（this.loadedFiles==this.allFiles）在loadImage（）方法中，当我将服务放入组件提供程序部分时，您知道它是如何工作的，在使用此服务加载组件之后或之前重新加载此服务吗？您是否建议更好地使用onClick（）方法？我想你需要一个先读取所有文件的方法，然后用这个列表调用loadImage方法，所以也许我会这样做，首先我读取所有文件，然后调用服务中包含setImage的loadImage，我会让所有组件更好地共享此图像。我尝试使用你的示例，但问题是我有错误吗该imageService未定义。我在app.module.ts中将其用作全局提供程序，并将其注入构造函数。因此，现在您有this.list，它进入loadImage，但imageService未定义，嗯……我可以看看您如何注入它吗？