【Day08】执行绪与同步、非同步

单执行绪、同步

JavaScript 是单执行绪的程序语言，

表示一次只能处理一件事，前面的事情完成之前，後面都不会被执行，

这种资料处理方式称为同步。

非同步

非同步是指在请求发出後，等待回传结果之前可以先执行其他的程序码，

而不是卡在那边等接收到结果後，才执行後方的程序码，

而 JavaScript 中也有非同步，

在 JavaScript 中执行非同步时，

会先将非同步的行为会放到事件伫列里面，

等程序码全部执行完後，再执行事件伫列里的程序码

范例

下方范例我们在开发人员工具的 Sources 看执行堆叠的部分如何执行

范例一

本范例以 setTimeout() 为例

function eat() {
    console.log('吃');
}

function callSomeone(someone) {
    console.log(`打给 ${someone}`);
    setTimeout(function () {
        console.log(`${someone} 回拨`);
    }, 0);
}

function sleep() {
    console.log('睡');
}

function doWork() {
    let person = 'weiwei';
    eat();
    callSomeone(person);
    sleep();
}

doWork();

结果能看见 setTimeout() 的结果最後才显示出来，

此时能看见 Call Stack 只有全域执行环境，

随後点击红框中的箭头进行下一步

接着进到 doWork() 函式中，

能看到 doWork() 的执行环境叠在全域执行环境上面

进入 eat() 函式，

此时会先执行 eat() 中的结果

之後进到 callSomeone() 函式中

会先执行 '打给 weiwei' 结果，

之後读取到 setTimeout() 会先跳过它的内容

之後执行後面的 sleep()

到所有程序码执行完後，

才执行 setTimeout() 里的内容

因此 setTimeout() 可以视为非同步

范例二

本范例以 event(事件) 为例

HTML 程序码：

<p>点我</p>

JS 程序码：

function clickMe() {
    console.log('click');
}

const dom = document.querySelector('p');
dom.addEventListener('click', clickMe);

我们在 Sources 中，

我们会发现不管怎麽点下一步都不会触发 clickMe() 这个函式

只有点击网页上显示的 点我 时，才会触发 clickMe() 这个函式

所以事件也被视为非同步

以上就是今天的内容了，我们明天见！！