从 getJSON() 内部调用时，Push() 不起作用

Question

我目前正在使用 jQuery 拖放 formbuilder plugin。现在，我想从我的数据库中获取拖放元素并将这些元素添加到我的拖放构建器中。

这是我的请求函数：

function getElements(){
    $.getJSON( getContextPath() + "/api/elements/get", function (data){
        $.each(data, function(key, val) {
            addElement();
        });
    });
}

现在，我想将它们添加到 formbuilder 实例（我使用 this 示例并使用一些预定义的值）：

function addElement(){
    if (!window.fbControls) window.fbControls = [];
    window.fbControls.push(function(controlClass) {
        console.log("HERE");
        class controlStarRating extends controlClass {

            static get definition() {
              return {
                icon: '????',
                i18n: {
                  default: 'Star Rating'
                }
              };
            }

            configure() {
                this.js = '//cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js';
                this.css = '//cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css';
            }

            build() {
              return this.markup('span', null, {id: this.config.name});
            }

            onRender() {
              let value = this.config.value || 3.6;
              $('#'+this.config.name).rateYo({rating: value});
            }
        }

      // register control
      controlClass.register('starRating', controlStarRating);
      return controlStarRating;
    });
}

不幸的是，我的console.log("HERE") 没有被调用，所以似乎一切都停止了。奇怪的是，如果我将其用作我的请求函数，则该函数会正确执行：

function getElements(){
    var allElementsData = ["test"];
    // $.getJSON( getContextPath() + "/api/template/get", function (data){
    // });
    $.each(allElementsData, function(key, val) {
        addElement();
    });
}

有什么问题？

Answer 1

在函数 addElement 中，您将另一个函数推入数组 window.fbControls。但是第二个函数只放在未执行的数组中。例如，您可以使用以下语句执行它：window.fbControls[0]()。然后你会看到console.log("HERE")