如何在 JavaScript/jQuery 上立即加載？

Question

我拿起了一些其他開發人員以前開發的代碼，他們有一個帶有硬編碼元素的文件 index.html。 我應該通過調用 API 重構那些硬編碼元素，但它們不會立即呈現。

//index.html

<script src="./selectSpecialty.js"></script>
//some code (..)

          <textarea class="picklist_section_1007000061040 hide"> 
                  <div class="control-group ticket_section">
//hardcoded field
                    &lt;label class=&quot; required control-label name_of_the_event_997167-label &quot; for=&quot;helpdesk_ticket_name_of_the_event_997167&quot;&gt;Name of the event&lt;/label&gt;
                    &lt;div class=&quot;controls   &quot;&gt;
                    &lt;input class=&quot; required text section_field span12&quot; id=&quot;helpdesk_ticket_custom_field_name_of_the_event_997167&quot; name=&quot;helpdesk_ticket[custom_field][name_of_the_event_997167]&quot; size=&quot;30&quot; type=&quot;text&quot; /&gt;
                    &lt;/div&gt; 
                  </div>
                    <div class="control-group ticket_section">
//this is where the select should appear
                      <div id = "specialty">
                      </div>
                  </div>
            </textarea>

這是 API 調用

//specialty.js
jQuery.ajax(
    {
    url: "https://example.net",
    type: 'GET',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    headers: {
        "Authorization": "Basic " + btoa(api_key + ":x")
    },
    success: function(data, textStatus, jqXHR) {
        var specialtyChoices = data['choices'];
        var response = `<label class=" required control-label specialty_997167-label " for="helpdesk_ticket_specialty_997167">Specialty</label> <div class="controls">
                        <select class=" required dropdown_blank section_field dynamic_sections"
                        id="helpdesk_ticket_custom_field_specialty_997167" name="helpdesk_ticket[custom_field][specialty_997167]">
                        <option value="">...</option>`;
        for(let sc of specialtyChoices){
            response += '<option value="' + sc['value'] + 'data-id="">'
            response += sc['value']
            response += '</option> '
        }
        response += '</select></div>'
        jQuery('#specialty').html(response)
        
    },
    error: function(jqXHR, tranStatus) {
        jQuery('#result').text('Error');
        jQuery('#code').text(jqXHR.status);
        x_request_id = jqXHR.getResponseHeader('X-Request-Id');
        response_text = jqXHR.responseText;
        jQuery('#response').html(" Error Message : <b style='color: red'>"+response_text+"</b>.<br/> Your X-Request-Id is : <b>" + x_request_id 

    }
    }
);

有人可以向我解釋如何讓 API 調用像硬編碼字段一樣立即呈現？

Answer 1

由於您已經為 ajax 調用替換了硬編碼元素，因此渲染元素會有一些延遲。 至少你有一個小的延遲，因為這里有一個網絡調用，它會產生影響。

這就是為什么您可以放置​​一些加載微調 gif 來改善用戶體驗的原因。

沒有辦法解釋他們為什么這樣做，但是，可能是因為當時沒有要求