LayUI渲染数据失败之Ajax异步交互

案件

在layui中调用jquery的ajxa，返回数据，赋值给全局变量，通过DOM渲染到页面。

//定义变量
let sale;

//定义请求
$.ajax({
    
    type: "GET",
    url: "http://localhost:8080/product/sale",
    data: null,
    dataType: "json",
    success: function (data) {
    
        console.log(data)
        //全局变量赋值
        sale = data
    }
});

document.getElementById("saleData") = sale

根据js单线程执行，页面上会出现数据，但事实是这样的

查了资料才知道：

1. JS执行机制是单线程的。但它不必逐行执行。
2. JS执行分为同步任务和异步任务。

按照这种分类方法，JS的执行流程为：

首先，判断JS是同步还是异步，同步进入主线程，异步进入Event table（相当于等待队列）

其次，异步任务在事件表中注册一个函数。当满足某些条件时，它被推入事件队列。

最后进入主线程后就会执行同步任务。直到主线程空闲时，才会去Event队列中查看是否有可执行的异步任务。如果有，就会推送到主线程执行。

也就是说，执行js时，首先判断是同步任务还是异步任务。异步任务等待就绪队列，先执行同步任务。

JS同步执行、异步执行

浏览器加载 HTML、JS 和 CSS 的顺序

Ajax默认是异步任务，默认延迟执行。

//定义变量
let sale;

console.log(1)

//定义请求
$.ajax({
    
    type: "GET",
    url: "http://localhost:8080/product/sale",
    data: null,
    dataType: "json",
    success: function (data) {
    
        console.log(data)
        //全局变量赋值
        sale = data
        console.log(2)
    }
});

console.log(sale)
document.getElementById("saleData").innerText = sale
console.log(3)

如图可以看出ajax是最后执行的，而此时表格和内容都已渲染好了再赋值就没有意义了。那么如何赋值呢？

• 将ajxa改为同步任务（不推荐）

• 将渲染方法放在Ajax内部进行异步执行

console.log(1)

//定义请求
$.ajax({
    
    type: "GET",
    url: "http://localhost:8080/product/sale",
    data: null,
    dataType: "json",
    success: function (data) {
    
        //console.log(data)
        updateSaleData(data)
        console.log(2)
    }
});

function updateSaleData(vo){
    
    document.getElementById("saleData").innerText = vo
}

console.log(3)