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

案例

layui调用jqueryajxa返回数据赋值全局变量通过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 table注册函数,当满足特定的条件,被推入Event queue

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

也就是说,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最后执行的,而此时表格内容都已渲染好了再赋值没有意义了。那么如何赋值呢?


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)

在这里插入图片描述
在这里插入图片描述

原文地址:https://blog.csdn.net/xwh3165037789/article/details/128961941

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_27012.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注