// 節(jié)點遍歷的入口函數
function Reconcile協調() {
    節(jié)點遍歷()
}
function Schedule調度() {
    創(chuàng)建分片(Reconcile協調)
}

function 創(chuàng)建分片(需要被調度的函數) {
    const 新的任務 = {
        callback: 需要被調度的函數
    }
}

const taskQueue = []
function 創(chuàng)建分片(需要被調度的函數) {
    const 新的任務 = {
        callback: 需要被調度的函數,
        expirationTime: performance.now() + 5000
    }
    taskQueue.push(新的任務)
    發(fā)起異步調度()
}

function 分片過期校驗() {
    return (perfromance.now() - 分片開啟時間) >= 5000
}
let 需要被遍歷的幸運兒節(jié)點 = null
function 構建節(jié)點() {
    /** * ...在這里進行節(jié)點構建工作 */
    需要被遍歷的幸運兒節(jié)點 = 需要被遍歷的幸運兒節(jié)點.next
}
function 節(jié)點遍歷() {
    while (需要被遍歷的幸運兒節(jié)點 != null && !分片過期校驗()) {
        構建節(jié)點()
    }
}
function Schedule調度() {
    創(chuàng)建分片(Reconcile協調)
}

function 分片過期校驗() {
    return (perfromance.now() - 分片開啟時間) >= 5000
}
function 分片事件循環(huán)() {
    let 棧頂任務 = taskQueue.peek()

    while (棧頂任務) {
        if (分片過期校驗()) break
        const 棧頂任務回調 = 棧頂任務.callback()
        if (typeof 棧頂任務回調 == 'function') {
            // 當前任務還沒有執(zhí)行完，繼續(xù)搞
            棧頂任務.callback = 棧頂任務回調
        } else {
            // 當前任務已執(zhí)行完，彈出隊列
            taskQueue.pop()
        }
        棧頂任務 = taskQueue.peek()
    }
    // 還有任務哦
    if (棧頂任務) return true
    return false
}
function 分片執(zhí)行() {
    分片開啟時間 = performance.now()
    var 是否還有任務未執(zhí)行完畢
    try {
        是否還有任務未執(zhí)行完畢 = 分片事件循環(huán)()
    } finally {
        // 分片重啟
        if (是否還有任務未執(zhí)行) 發(fā)起異步調度()
    }
}
function 發(fā)起異步調度() {
    // 這里實際上是異步執(zhí)行，看下面有間隔
    分片執(zhí)行()
}

function 發(fā)起異步調度() {
    // 將主線程短暫的交還給瀏覽器
    setTimeout(() => {
        分片執(zhí)行()
    }, 0)
}

const taskQueue = []
let 分片開啟時間 = -1
// **時間分片核心**
const 分片過期校驗 = () => {
    return (perfromance.now() - 分片開啟時間) >= 5000
}
function 分片事件循環(huán)() {
    let 棧頂任務 = taskQueue.peek()
    while (棧頂任務) {
        // 每執(zhí)行完一個任務，都要校驗一下分片是否過期
        if (分片過期校驗()) break
        const 棧頂任務回調 = 棧頂任務.callback()
        if (typeof 棧頂任務回調 == 'function') {
            // 當前任務還沒有執(zhí)行完，繼續(xù)搞
            棧頂任務.callback = 棧頂任務回調
        } else {
            // 當前任務已執(zhí)行完，彈出隊列
            taskQueue.pop()
        }
        棧頂任務 = taskQueue.peek()
    }
    // 還有任務哦
    if (棧頂任務) return true
    return false
}
function 分片執(zhí)行() {
    分片開啟時間 = performance.now()
    var 是否還有任務未執(zhí)行完畢
    try {
        是否還有任務未執(zhí)行完畢 = 分片事件循環(huán)()
    } finally {
        // **時間分片核心：分片重啟**
        if (是否還有任務未執(zhí)行) 發(fā)起異步調度()
    }
}
// 實例化 MessageChannel
const channel = new MessageChannel()
const port2 = channel.port2
channel.port1.onmessage = 分片執(zhí)行
function 發(fā)起異步調度() {
    // 向通道1發(fā)消息，通道1收到消息就會執(zhí)行分片任務
    // **時間分片核心：延遲執(zhí)行**
    port2.postMessage(null)
}
function 創(chuàng)建分片(需要被調度的函數) {
    // **時間分片核心：分片開啟**
    const 新的任務 = {
        callback: 需要被調度的函數,
        expirationTime: performance.now() + 5000
    }
    taskQueue.push(新的任務)
    發(fā)起異步調度()
}
export default {
    創(chuàng)建分片,
    分片過期校驗
}

import * as Scheduler from './Scheduler'
const {
    創(chuàng)建分片,
    分片過期校驗
} = Scheduler
let 需要被遍歷的幸運兒節(jié)點 = null
function 構建節(jié)點() {
    /** * ...在這里進行節(jié)點構建工作 */
    需要被遍歷的幸運兒節(jié)點 = 需要被遍歷的幸運兒節(jié)點.next
}
function 節(jié)點遍歷() {
    // **時間分片核心：分片中斷**
    while (需要被遍歷的幸運兒節(jié)點 != null && !分片過期校驗()) {
        構建節(jié)點()
    }
}
function Schedule調度() {
    創(chuàng)建分片(Reconcile協調)
}
function 調度入口() {
    需要被遍歷的幸運兒節(jié)點 = react應用根節(jié)點
    Schedule調度()
}
調度入口()