多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;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章