事件驱动&时间驱动
事件驱动
参考链接
事件驱动看文字就够了!
我的理解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()}`
);
// 没做出来
时间驱动
有什么不同见解可以在评论区共同讨论