Javascript 使用来自服务器的文件填充dropzone-异步

我正在尝试用从服务器获取的文件填充我的dropzone。我发现它似乎做了我想要的，但是似乎我只能在init函数中调用这个addCustomFile函数，而不是在我从服务器异步接收数据（以及与我正在查看的对象关联的文件列表）之后

---

关于如何最好地修改它，以便在创建dropzone后在异步函数中调用它，您有什么想法吗？

我可以使用Promissions解决这个问题。我必须为一个承诺定义一个变量，同时为整个代码范围内的数据定义一个变量。然后在初始化期间创建承诺，并在另一个异步调用中解析它。更新代码如下：

var imageLoadDefer; //Variable that will get a promise
var slowLoaded; //Variable that will get loaded with data async
Dropzone.options.imageDrop = {
url: "upload.php",
previewTemplate: previewTemplate,
params: { taskId: urlParams.get('id')},
init: function() {
    this.addCustomFile = function(file, thumbnail_url , response){
        this.files.push(file);
        this.emit("addedfile", file);
        this.emit("thumbnail", file, thumbnail_url);
        this.emit("processing", file);
        this.emit("success", file, response , false);
        this.emit("complete", file);
     }
     //Create the promise using jQuery
     imageLoadDefer =$.Deferred();
     //Important: Make sure to put this into a variable that can be used in the following function
      var imDrop = this;
      imageLoadDefer.always(function(){
            //promise is resolved and variable is now populated
            imDrop.addCustomFile ({ //THIS WORKS NOW, ASYNC
                processing: true,
                accepted: true,
                name: slowLoaded.name,
                size: slowLoaded.size,
                type: 'image/jpeg',
                status: Dropzone.SUCCESS
            }, slowLoaded.thumbnail, {
                status: "success"
            });
       });
    }
}

let imageDropZone = $("#imageDrop").dropzone();
$.getJSON('images.json', function (data) { 
        slowLoaded = data;
        imageLoadDefer.resolve(); //data loaded so resolve image promise
}

var imageLoadDefer; //Variable that will get a promise
var slowLoaded; //Variable that will get loaded with data async
Dropzone.options.imageDrop = {
url: "upload.php",
previewTemplate: previewTemplate,
params: { taskId: urlParams.get('id')},
init: function() {
    this.addCustomFile = function(file, thumbnail_url , response){
        this.files.push(file);
        this.emit("addedfile", file);
        this.emit("thumbnail", file, thumbnail_url);
        this.emit("processing", file);
        this.emit("success", file, response , false);
        this.emit("complete", file);
     }
     //Create the promise using jQuery
     imageLoadDefer =$.Deferred();
     //Important: Make sure to put this into a variable that can be used in the following function
      var imDrop = this;
      imageLoadDefer.always(function(){
            //promise is resolved and variable is now populated
            imDrop.addCustomFile ({ //THIS WORKS NOW, ASYNC
                processing: true,
                accepted: true,
                name: slowLoaded.name,
                size: slowLoaded.size,
                type: 'image/jpeg',
                status: Dropzone.SUCCESS
            }, slowLoaded.thumbnail, {
                status: "success"
            });
       });
    }
}

let imageDropZone = $("#imageDrop").dropzone();
$.getJSON('images.json', function (data) { 
        slowLoaded = data;
        imageLoadDefer.resolve(); //data loaded so resolve image promise
}