循环发送Ajax请求时浏览器冻结

时间:2018-09-10 10:32:06

标签: jquery ajax loops for-loop each

首先,我知道有很多类似的问题,但与其他问题相比,我的问题相差无几。实际上,问题是我正在循环内发送ajax请求,并且无论何时脚本运行并到达该循环部分,浏览器都会冻结,现在我确实需要该循环,但是我想知道在不冻结我的情况下该请求有任何可行的方法浏览器。这是我写的代码

jQuery(document).on("click", '#start-backup', function(e) {
  e.preventDefault();
  // Uploading folders and directories setting.
  var $ = jQuery;
  $('#loadingModal').modal('show');
  // Renaming the folder name
  var folderName = $(this).parentsUntil('#backup-settings').find('#zipName').val();
  var domain = window.location.hostname;
  var dt = new Date();
  var dateTime = dt.getDay() + "-" + dt.getMonth() + "-" + dt.getFullYear() + "-" + dt.getHours() + ":" + dt.getMinutes();
  if (folderName !== '') {
    var folder = domain + '_' + folderName + '_' + dateTime;
  } else {
    var folder = domain + '_' + dateTime;
  }

  var ftp_dir = $(this).attr('data-ftp-directory');
  var s3_dir = $(this).attr('data-s3-directory');
  var drive_dir = $(this).attr('data-drive-directory');
  var dropbox_dir = $(this).attr('data-dropbox-directory');

  var source = $(this).attr('data-source');

  // Uploading Basic Settings.
  var type = $('#type').find('.active').attr('data-value');
  var component = $('#component').find('.active').attr('data-value');
  var schedule = $('#schedule').find('.active').attr('data-value');

  if (schedule === 'schedule') {
    var scheduleType = $('#SchedulePane').find('.active input').val();

    if (scheduleType === 'monthly') {
      var dated = $('#sc_date').val();
      var day = $('#sc_day').val();
      var hour = $('#M-H').val();
      var min = $('#M-M').val();
      var am = $('#M-T').val();
    } else if (scheduleType === 'weekly') {
      var dt = new Date();
      var dated = dt.getFullYear() + '-' + parseInt(dt.getMonth() + 1) + '-' + dt.getDate();
      var day = $('#W-D').val();
      var hour = $('#W-H').val();
      var min = $('#W-M').val();
      var am = $('#W-T').val();
    } else if (scheduleType === 'daily') {
      var dt = new Date();
      var dated = dt.getFullYear() + '-' + parseInt(dt.getMonth() + 1) + '-' + dt.getDate();
      var day = '';
      var hour = $('#D-H').val();
      var min = $('#D-M').val();
      var am = $('#D-T').val();
    } else if (scheduleType === 'hourly') {
      var dt = new Date();
      var dated = dt.getFullYear() + '-' + parseInt(dt.getMonth() + 1) + '-' + dt.getDate();
      var day = '';
      var hour = '';
      var min = '';
      var am = '';
    }
  }

  var storedIn = $('.storedIn').map(function() {
    return $(this).attr('data-value');
  }).get();

  if (component == 'partial') {
    var allComponents = $("#partial_params .active-color").map(function() {
      return $(this).attr('id');
    }).get();
  }
  jQuery.ajax({
    url: ajaxurl,
    type: 'GET',
    data: {
      action: 'create_zip',
      folder: folderName,
      ftp_dir: ftp_dir,
      s3_dir: s3_dir,
      drive_dir: drive_dir,
      dropbox_dir: dropbox_dir,
      source: source,
      component: component,
      allComponent: allComponents,
      storeIn: storedIn,
      scheduleType: scheduleType,
      schedule: schedule,
      date: dated,
      day: day,
      hour: hour,
      min: min,
      am: am,
      btype: type
    },
    success: function() {

      if (schedule === 'schedule') {
        location.reload(true);
      } else {
        jQuery.ajax({
          url: ajaxurl,
          type: 'GET',
          async: false,
          data: {
            action: 'get_zip_count'
          },
          success: function(data) {
            var total = data;
            for (var i = 0; i < data; i++) {

              var progress = parseInt(i) / parseInt(total) * parseInt(100);
              jQuery('.progress-bar').css("width", progress + '%;');

              jQuery.each(storedIn, function(key, value) {
                if (value === 'ftp') {
                  var action = 'moko_upload_to_ftp';
                  var dir = ftp_dir;
                } else if (value === 'dropbox') {
                  var action = 'moko_upload_to_dropbox';
                  var dir = dropbox_dir;
                } else if (value === 's3') {
                  var action = 'moko_upload_to_s3';
                  var dir = s3_dir;
                } else if (value === 'drive') {
                  var action = 'moko_upload_to_drive';
                  var dir = drive_dir;
                }
                jQuery.ajax({
                  url: ajaxurl,
                  type: 'GET',
                  async: false,
                  data: {
                    action: action,
                    dir: dir,
                    file_name: jQuery(location).attr('host') + '_' + folderName + '-' + i
                  },
                  success: function() {
                    if (i === total - 1) {
                      jQuery.ajax({
                        url: ajaxurl,
                        type: 'GET',
                        async: false,
                        data: {
                          action: 'store_backup',
                          folder: folderName,
                          ftp_dir: ftp_dir,
                          s3_dir: s3_dir,
                          drive_dir: drive_dir,
                          dropbox_dir: dropbox_dir,
                          component: component,
                          allComponent: allComponents,
                          storeIn: storedIn
                        },
                        success: function() {
                          location.reload(true);
                        }
                      });
                    }
                  }
                });
              });
            }
          }
        });
      }
    }
  });
});

真正的问题开始于我的请求到达存在两个循环的上载部分时。任何帮助将不胜感激,谢谢。

0 个答案:

没有答案