Ajax-同步&异步代码

Ajax
924 词
同步&异步代码

同步&异步代码#

看看其他大佬的： 千古前端-单线程和异步任务

同步代码：浏览器是按照书写代码的顺序 一行一行地 执行程序，浏览器会等待代码的解析和工作，在上一行完成后才会执行下一行，这样做是很有必要的因为每一行新的代码都是建立在前面代码地基础之上的，这也使得它成为一个 同步程序

同步代码：逐行执行，需原地等待结果后，才继续向下执行

同步代码如函数、循环、判断

异步代码：异步编程技术使我们的程序可以在一个可能 长期运行的任务 的同时继续对其它事件作出反应而 不必等待任务完成 ，与此同时，我们的程序也将在任务完成后显示结果

异步代码：调用后 耗时 ，不阻塞代码继续执行（不必原地等待），在将来完成后触发一个 回调函数

异步代码使用回调函数接收结果

异步代码如：setTimeOut()定时器

我们来看一个例子：

const result = 0 + 1
console.log(result);
setTimeout(() => {
    console.log(2);
}, 2000)
document.querySelector('.btn').addEventListener('click', () => {
    console.log(3);
})
document.body.style.backgroundColor = 'pink'
console.log(4);

回答打印数字的顺序是什么？

打印结果：1，4，2，点击按钮一次就打印一次3

或者，2s内点击了按钮：1，4，3，2

代码解释：

上面这段代码可大致分为以下几个部分

  1. 阶段一 
    const result = 0 + 1
console.log(result); // 1

    同步代码逐行执行，result先被计算得出结果1，接着控制台打印

    优先级：1

  2. 阶段二 
    setTimeout(() => {
    console.log(2); // 2
}, 2000)

    异步代码不必原地等待，等待2s后控制台打印

    但是，异步代码被执行前需要确定所有的同步代码已执行完毕，所以 优先级往后推

  3. 阶段三 
    document.querySelector('.btn').addEventListener('click', () => {
    console.log(3); // 3
})

    异步代码，事件被触发后才会调用， 优先级往后推

  4. 阶段四、五 
    document.body.style.backgroundColor = 'pink'
console.log(4); // 4

    同步代码，依次执行

    优先级：2、3

阶段二、三两段都是异步代码，阶段二中定时器需等待2s才执行，而阶段三按钮被点击即执行，所以页面加载后在2s的等待时间内若点击事件被触发，那么也会先打印3，后打印2

注意： 定时器不会被点击事件打断而重新计时