事件驱动&时间驱动

事件驱动

参考链接
事件驱动看文字就够了！
我的理解and一些实现想法：
程序不通过循环监听实现事件发生的方式为事件驱动。
具体化就是程序本身有一个主循环体用于接收UI触发的事件，每触发一次循环次数加一，深入循环内部，会对事件进行处理，处理完成后将结果返回以及循环标记位减一，直至标记位为0，循环停止，此时如果再有事件才会使主循环继续运行，大大减少了没必要的进程。

下面是我的实现⬇️

var tasks = new Array(); // 事件数组
function uuid() {
    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
            var r = (Math.random() * 16) | 0,
                v = c == "x" ? r : (r & 0x3) | 0x8;
            return v.toString(16);
        }
    );
}
 
function processInfo(a, b, c) {
    return {
        uuid: uuid(), // 以时间戳为事件id
        event: a, // 事件类型
        date: b, // 触发时间
        params: c, // 事件参数
        result: { flag: false, msg: "" }, // 处理结果
    };
} // 加工信息
 
function mainProcess(params) {
    // 主任务循环
    tasks.push(params);
    function handle(params) {
        var time;
        time = setInterval(() => {
            console.log(
                `taskArray size: ${taskArrayLen} - ${new Date().toLocaleString()}`
            );
            if (taskArrayLen === 0) clearInterval(time);
        }, 20);
        while (tasks.length > 0) {
            var taskArrayLen = tasks.length;
            // console.log(
            //     `taskArray size: ${taskArrayLen} - ${new Date().toLocaleString()}`
            // );
            switch (
                params.event // 进行事件分配
            ) {
                case "onClick": {
                    var result = onClick(params);
                    if (result.flag == true) {
                        var index = tasks.findIndex(
                            (e) => e.uuid === params.uuid
                        );
                        tasks.splice(index, 1);
                        break;
                    }
                }
                case "mouseOn": {
                    var result = mouseOn(params);
                    if (result.flag == true) {
                        var index = tasks.findIndex(
                            (e) => e.eventId === params.eventId
                        );
                        tasks.splice(index, 1);
                        break;
                    }
                }
            }
        }
    }
    handle(params);
}
 
function onClick(params) {
    // console.log(`onClick: ${JSON.stringify(params)}`);
    params.result.flag = true;
    setTimeout(() => {
        console.log("onclick");
    }, 2000);
    return params.result;
}
 
function mouseOn(params) {
    // console.log(`mouseOn: ${JSON.stringify(params)}`);
    params.result.flag = true;
    return params.result;
}
 
for (let i = 0; i < 5; i++) {
    var onClick1 = processInfo(
        "onClick",
        `new Date().toLocaleString()-`,
        "one"
    );
    var mouseOn1 = processInfo("onClick", new Date().toLocaleString(), "one");
    mainProcess(onClick1);
    mainProcess(mouseOn1);
}
 
console.log(
    `taskArray handle size: ${tasks.length} - ${new Date().toLocaleString()}`
);
 
// 没做出来
 

时间驱动