多ajax请求下浏览器UI阻塞解决

 批量文件文件异步上传

当使用ajax进行几十上百次的请求时,由于request请求会使浏览器处于等待状态,从而造成浏览器长时间无法访问的问题。针对此类问题,需使用

Deferred使其成为异步操作。

具体使用流程如下:

$scope.commitOrc = function () {
    //判断是否选中文件夹
    var fileOrc = $("#fileFolderOrc").val();
    if (fileOrc == '') {
        $("#msgCrc").text('请选择要上传的文件夹');
        return;
    }
    while ($scope.alreadyUploadSize < $scope.actual_filesCount) {
        var end = $scope.alreadyUploadSize + $scope.uploadEachNumber > $scope.actual_filesCount ? $scope.actual_filesCount : $scope.alreadyUploadSize + $scope.uploadEachNumber;
        var formData = new FormData(); // FormData 对象
        for (var i = $scope.alreadyUploadSize; i < end; i++) {
            formData.append('image', $scope.files[i]);
        }
        $scope.alreadyUploadSize = end;
        // var deferreds = $scope.uploadFile(formData);
        $.when($scope.uploadFile(formData))
            .done(function() {
                console.log("ok");//可有可无
            })
            .fail(function () {
                alert(data.msg);
            });
    }
}
$scope.uploadFile = function (data) {
    var defer = $.Deferred();
    $.ajax({
        url: 'url',
        type: 'POST',
        data: data,
        async: true,
        cache: false,
        contentType: false, //不设置内容类型
        processData: false, //不处理数据
        success: function (data) {
            XXXXX,自己的处理方法
            defer.resolve();
        },
        error: function (data) {
         
            defer.resolve();
        }
    });
    return defer;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章