在JS函数中，等到调用另一个函数结束，然后继续语句

Question

我知道这个主题已经是实际的而不只是一次，但我找不到我需要的东西。

我有一个函数，我正在调用另一个函数。在那个“另一个函数”JS正在改变图像的source。问题是下一个语句在图像的源更改之前运行。我现在正在使用setTimeout，但我想让我的代码更好，并知道如何处理它。

function readURL(input) { //--preview of uploaded image--

  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
          $('#image').attr('src', e.target.result);
          $('.foto_add').css('background-position','center'); 
          $('.foto_add').css('background-position-y','top');
          $('.foto_add').css('background-image', 'url(' + e.target.result + ')');

    }
    reader.readAsDataURL(input.files[0]);
  }
}

  

然后：

$("#avatar").change(function() {
      readURL(this); //--calling of preview uploaded image function--
 var $image = $('#image');   
$image.cropper({
          aspectRatio: 1,
          autoCropArea: 0.1,
          cropBoxResizable: false,
          guides: false,
          highlight: false,
          toggleDragModeOnDblclick: false,
          minCropBoxWidth: 200,
          minCropBoxHeight: 200,
          minCanvasHeight: 200,
          zoomable: true,
          viewMode: 1,//can't enter at empty canvas
          dragMode: 'move',
          responsive: true,
          imageSmoothingEnabled: false,
          imageSmoothingQuality: 'high',
          ready: function () {
            $image.cropper('setCanvasData', canvasData);
            $image.cropper('setCropBoxData', cropBoxData);
          }
        });