Promise + 递归的方式，避免浏览器在等待AJAX 响应时阻塞用户界面

最新推荐文章于 2024-10-30 08:37:39 发布

KingFu28

最新推荐文章于 2024-10-30 08:37:39 发布

阅读量258

点赞数 8

文章标签： ajax ui 前端

本文链接：https://blog.csdn.net/kingwin28/article/details/138967984

版权

功能：

获取 jqGrid 当前页面的数据，批量执行API。

由于API执行过程时间较长，为了避免async: false 时浏览器在等待 AJAX 响应时阻塞用户界面。顾通过以下Promise + 递归的方式执行API。

// 调用
rethrustCurPage();

function processRow(index, ids, gridId) {
    if (index >= ids.length) {
        // 所有行都已处理完毕      	
        return Promise.resolve();
    }

    var rowId = ids[index];
    var rowObject = $("#" + gridId).jqGrid('getRowData', rowId);
	
    return new Promise((resolve, reject) => {
    	// 仿 Loading 可用别的控件代替
      	ajaxLoading();
      	if(rowObject.F_SUCCESS=='true') {
            // 递归调用以处理下一行
            resolve(processRow(index + 1, ids, gridId));
        }
      
        $.ajax({
            url: "/zs/flow2log",
            type: "post",
            contentType: "application/json",
            // 移除 async: false，因为我们正在使用 Promise
            data: JSON.stringify({
                "DATA": rowObject.F_DATA.replace(/\"/g, "'"),
                "ID_": rowObject.ID_
            }),
            dataType: "json",
            success: function(result) {
                // 递归调用以处理下一行
                resolve(processRow(index + 1, ids, gridId));
            },
            error: function(xhr, status, error) {
                // 处理错误情况
                console.error("Error processing row:", error);
                reject(error);
            }
        });
    });
}

function rethrustCurPage() {
    $.topCall.confirm("温馨信息", ('是否需要批量重推false的数据？'),function(rtn) {
        if(!rtn) return;
      
      	// 开始处理第一行
        var ids = $("#gridList").jqGrid('getDataIDs');
        processRow(0, ids, "gridList").then(() => {
            // 所有行都已成功处理
            // 结束 loading
          	ajaxLoadEnd();
          	$("#gridList").trigger("reloadGrid");
            console.log("All rows processed successfully.");
        }).catch(error => {
            // 如果有任何行处理失败，将在这里捕获错误
            console.error("Error processing rows:", error);
        });      	
    })
}

/**
 * easyui 的 loading 效果
 */
function ajaxLoading(){   
    $("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");   
    $("<div class=\"datagrid-mask-msg\" style=\"height:45px;\"></div>").html("Loading, Please wait...").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});   
 }
  
function ajaxLoadEnd(){
   $(".datagrid-mask").remove();   
   $(".datagrid-mask-msg").remove();               
}