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

本文介绍: 同步任务进入主线程后一直执行，直到主线程空闲后，才会去Ev ent queue中查看是否有可执行的异步任务，如果有就推入主线程中执行。其次，异步任务在Ev ent table中注册函数，当满足特定的条件，被推入Event queue。在layui中调用 jquery的aj xa，返回数据，赋值给全局变量，通过DOM渲染到页面。也就是说，js在执行是先判断是同步还是异步任务，异步任务等到就绪队列，优先执行同步任务。而Aja x 默认是异步任务，默认延迟执行。所以渲染需要定义在aj x a 内部

案例

在layui中调用 jquery的ajx a，返回数据，赋值给全局变量，通过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的单线程执行，那么数据就会出现在页面上，可是事实是如下所示

在这里插入图片描述

查了资料才知道：

按照这种的分类方式JS的执行过程是：

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

//定义变量
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)


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)