Question

在ajax完成之前破坏属性。我发现的唯一解决方案是制作＆＃34; async：false＆＃34;。但它被弃用了。有没有更好的选择等到ajax完成而没有将异步设置为false？

$.getJSON(jsonUrl, function(data) {
  var type, json, options;

  var globalData = data;

  $.each(globalData.properties, function(key, value) {
    switch(value.type) {
      case 'string':
        type = '<input type="text">'
        break;
      case 'int':
        type = '<input type="number" min="0">'
        break;
      case 'decimal':
        type = '<input type="number" min="0" step="0.01">'
        break;
      case 'date':
        type = '<input type="date">'
        break;
      case 'boolean':
        type = '<input type="checkbox">'
        break;
      case 'json':
        json = './assets/json/' + value.json_name + '.json'

        $.ajax({
          async: false,
          url: json,
          success: function(data) {
            $.each(data, function(index, item) {
              options += '<option value=' + item.key + '>' + item.value + '</option>'
            })

            type = '<select id="issue-form"><option disabled selected value></option>' + options + '</select>';
          }
        });

        break;
    }


    listItem += '<li class="questionnaire_item">' + 
                  '<label>' + 
                    '<div class="question">' + 
                      value.description + ':' + 
                    '</div>' + 
                    '<div class="input">' + 
                      type + 
                    '</div>' + 
                  '</label>' +
                '</li>';

    type = '';
  })

  form.innerHTML += listItem;
  $('.content').append(form)});

Answer 1

解决此问题的最佳方法是将您的休息或操作放在ajax请求的成功回调中，除此之外，您可以在ajax请求的beforeSend回调中使用布尔值集，等待你的布尔值仍然是假的：

$.getJSON(jsonUrl, function(data) {
var type, json, options;

var globalData = data;

  $.each(globalData.properties, function(key, value) {
  var isBusy = false;
    switch(value.type) {
      case 'string':
        type = '<input type="text">'
        break;
      case 'int':
        type = '<input type="number" min="0">'
        break;
      case 'decimal':
        type = '<input type="number" min="0" step="0.01">'
        break;
      case 'date':
        type = '<input type="date">'
        break;
      case 'boolean':
        type = '<input type="checkbox">'
        break;
      case 'json':
        json = './assets/json/' + value.json_name + '.json'

        $.ajax({
          async: false,
          url: json,
          beforeSend: function(){
            isBusy = true;
          },    
          success: function(data) {
            isBusy = false;
            $.each(data, function(index, item) {
              options += '<option value=' + item.key + '>' + item.value + '</option>'
            })

            type = '<select id="issue-form"><option disabled selected value></option>' + options + '</select>';
          }
        });
            while(isBusy) {}
        break;
    }


listItem += '<li class="questionnaire_item">' + 
              '<label>' + 
                '<div class="question">' + 
                  value.description + ':' + 
                '</div>' + 
                '<div class="input">' + 
                  type + 
                '</div>' + 
              '</label>' +
            '</li>';

type = '';
  })

  form.innerHTML += listItem;
  $('.content').append(form)});

但是再一次它打破了AJAX请求的重点，你最好在加载页面之前准备好数据，然后再显示它。

说实话，这个解决方案并不是最好的解决方案，我会像Rory在评论中所说的那样有希望。

替代ajax async：false

1 个答案: