在 switch 语句中调用 requirejs 的问题

Question

我在读取 json 对象以构建表单时遇到问题。当我阅读表单字段类型时，我会通过一个关于如何使用引导程序构建字段的 switch 语句。在某些情况下，我想调用像 datepicker 这样的二级库。

for(var i=0, l=$custFormFields.length; i<l; i++) {
        $formLabel = $custFormFields[i].label;
        var $inputFieldType = '';
        var $inputEndTag = '';
        var $inputTagType = 'input';
        var $inputRequired = '';
        var $inputFieldWidth = '';
        var $inputFieldRows ='';
        var $inputMaxChar = '';
        var $inputdefaultValue ='';
        var $inputEnableSpellCheck ='';
        var $inputHidden ='';
        var $inputCanUploadAsset ='';
        var $textAreaDefaultVal = '';

        if ($custFormFields[i].required == "true") {
            $inputRequired = "required";
        } else {}        
switch ($custFormFields[i].fieldType){


                    case "dropdown":
                        fieldRendered = false;
                        var $optionLines ="";
                        $inputTagType = 'select';
                        $inputEndTag = "</select>";
                        for(var o=0, l=$custFormFields[i].tagOption.length; o<l; o++) {
                            var $optionInfo = $custFormFields[i].tagOption[o];
                            var $optionLines = $optionLines + '<option value="' + $optionInfo.value + '">' + $optionInfo.name + '</option>';
                        }

                        $formInput = '<' + $inputTagType + ' class="floatL" id="'+ $custFormFields[i].tagCode + '" name="'+ $custFormFields[i].tagCode + '" ' + $inputRequired + ' onchange="dropdownListener(' + $custFormFields[i].tagCode + ')" >' + $optionLines + $inputEndTag + '<label id="' + $custFormFields[i].tagCode + '_value"  class="control-label" />';
                        fieldRendered = true;
                    break
                    case "dropdown-editable":
                        fieldRendered = false;
                        var $optionLines ="";
                        $inputTagType = 'select';
                        $inputEndTag = "</select>";
                        for(var o=0, l=$custFormFields[i].tagOption.length; o<l; o++) {
                            var $optionInfo = $custFormFields[i].tagOption[o];
                            var $optionLines = $optionLines + '<option value="' + $optionInfo.value + '">' + $optionInfo.name + '</option>';
                        }

                        $formInput = '<' + $inputTagType + ' id="'+ $custFormFields[i].tagCode + '" name="'+ $custFormFields[i].tagCode + '" ' + $inputRequired + ' onchange="dropdownEditListener(' + $custFormFields[i].tagCode + ')" >' + $optionLines + $inputEndTag + '<input id="' + $custFormFields[i].tagCode + '" class="input-xlarge" type="text">'
                        fieldRendered = true;
                    break;
                    case "datePicker":
                        fieldRendered = false;
                        if (typeof Datepicker === 'undefined'){
                            require(['scripts/bootstrap-datepicker.js'], function(data){
                                $formInput = '<div id="' + $custFormFields[i].tagCode + '_range" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"><i class="icon-calendar icon-large"></i><span></span> <b class="caret" style="margin-top: 8px"></b>   </div><input type="hidden" id="'+ $custFormFields[i].tagCode + '" value="'+ $custFormFields[i].defaultValue + '"/>';

                            });
                            break;
                            fieldRendered = true;
                        }else {
                            $formInput = '<div id="' + $custFormFields[i].tagCode + '_range" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"><i class="icon-calendar icon-large"></i><span></span> <b class="caret" style="margin-top: 8px"></b>   </div><input type="hidden" id="'+ $custFormFields[i].tagCode + '" value="'+ $custFormFields[i].defaultValue + '"/>';
                            break;
                            fieldRendered = true;
                        }
    var fri=0;
            while(fieldRendered == false){
               setTimeout(function() {}, 100);
               fri++
            }
            $formHTML = $formHTML + '<div class="control-group"><label class="control-label">' + $formLabel + '</label><div class="controls">' + $formInput + '</div></div>\n\r';
        }
        return $formHTML;

我遇到的问题是，一旦我进行了 require 调用，switch 语句就会继续并使用之前的传递信息跳过该字段。

我什至在一个布尔值中添加了一个案例的开始设置为 false 并在完成后设置为 true。然后执行一个 while 循环，一旦布尔值为真，该循环就应该结束。但是 require 调用并没有拉入脚本，我陷入了无限循环。有什么建议吗？

Answer 1

这可能与 标志是在 语句之后设置的事实有关吗？

require(['scripts/bootstrap-datepicker.js'], function (data) {
    $formInput = '(snip)';
});
break;
fieldRendered = true; // <- dead code

---

一般来说，其他一些部分对我来说看起来有点狡猾，例如，看起来你正试图做一个 忙碌的旋转 在这里等待某事：

while(fieldRendered == false){
    setTimeout(function() {}, 100);
    fri++
}

由于 JavaScript 的异步特性，它的行为与您预期的不同； setTimeout 安排从现在开始 100 毫秒后执行一个空函数并立即进行下一个循环迭代，它不会等待 100 毫秒就进入 while 循环的下一个滴答声。

require 的回调也不会像您期望的那样执行；它只会在下载和初始化bootstrap-datepicker.js 后运行，这可能是在整个函数返回$formHTML 之后long。