添加任务队列

src/component/Canvas/OverallCanvas/index.vue

@@ -3,8 +3,11 @@
 </template>
 
 <script setup>
+	import TaskQueue from "../utils/TaskQueue.js";
 	import { fabric } from "fabric-with-all";
-	import { ref, watch, onMounted } from "vue";
+	import { ref, watch, onMounted, nextTick } from "vue";
+	// 任务队列
+	const taskQueue = new TaskQueue();
 	const KEYS = {
 		FILL_X: "location[0]",
 		FILL_Y: "location[1]",
@@ -42,35 +45,25 @@
 	var canvas = null;
 	onMounted(async () => {
 		initCanvas();
-		await setCanvasData();
-		let throttleTimeout = null;
-		let lastRunTime = 0;
+		// taskQueue.addTask(async () => await setCanvasData());
+		emit("init-canvas", props.list);
+		let throttleDelay = 100;
 		let trailingTimeout = null;
 		observer.value = new ResizeObserver((entries) => {
-			const now = Date.now();
-			const throttleDelay = 100;
-			if (!throttleTimeout) {
-				updateCanvasSize();
-				lastRunTime = now;
-				throttleTimeout = setTimeout(() => {
-					throttleTimeout = null;
-				}, throttleDelay);
-			} else {
 			clearTimeout(trailingTimeout);
 			trailingTimeout = setTimeout(() => {
-					updateCanvasSize();
-					lastRunTime = Date.now();
+				console.log("OverallCanvas: resize");
+				taskQueue.addTask(async () => await updateCanvasSize());
 			}, throttleDelay);
-			}
 		});
 		observer.value.observe(el.value);
-		emit("init-canvas", props.list);
 	});
 	onBeforeUnmount(() => {
 		observer.value.disconnect();
 		unbindEvent();
 	});
 	const initCanvas = () => {
+		console.log("OverallCanvas: initCanvas");
 		canvas = new fabric.Canvas(canvasRef.value, {
 			selection: false,
 			preserveObjectStacking: true,
@@ -80,6 +73,7 @@
 		bindEvent();
 	};
 	const updateCanvasSize = async () => {
+		console.log("OverallCanvas: updateCanvasSize");
 		canvas.setWidth(el.value.offsetWidth);
 		canvas.setHeight(el.value.offsetHeight);
 		await setCanvasData();
@@ -98,7 +92,7 @@
 	};
 	// 处理对象修改事件
 	const onObjectModified = (e) => {
-		console.log(e);
+		console.log("OverallCanvas: onObjectModified", e);
 		const object = e.target;
 		const action = e.action;
 		const list = [];
@@ -174,6 +168,7 @@
 	};
 	const setCanvasData = async () => {
 		canvas.clear();
+		console.log("OverallCanvas: setCanvasData", props.list);
 		for (let i = 0; i < props.list.length; i++) {
 			let item = props.list[i];
 			await addObject(item);
@@ -194,7 +189,6 @@
 			left: item.object.left / (props.width / canvas.width),
 			onDelete: (v) => onDeleteItem(v),
 		});
-		console.log("==========", props)
 		canvas.add(rect);
 	};
 	const setFill = async (item) => {
@@ -232,7 +226,8 @@
 		return pattern;
 	};
 	const updataList = async (list) => {
-		console.log(list);
+		const cd = async (list) => {
+			console.log("OverallCanvas: updataList", list);
 			const objects = canvas.getObjects();
 			for (let i = 0; i < list.length; i++) {
 				let item = list[i];
@@ -242,10 +237,16 @@
 					let value = item.value;
 					switch (item.key) {
 						case KEYS.O_TOP:
-						object.set("top", value / (props.height / canvas.height));
+							object.set(
+								"top",
+								value / (props.height / canvas.height)
+							);
 							break;
 						case KEYS.O_LEFT:
-						object.set("left", value / (props.width / canvas.width));
+							object.set(
+								"left",
+								value / (props.width / canvas.width)
+							);
 							break;
 						case KEYS.O_OPACITY:
 							object.set("opacity", value);
@@ -299,6 +300,8 @@
 			}
 			canvas.renderAll();
 		};
+		taskQueue.addTask(async () => await cd(list));
+	};
 	defineExpose({
 		updataList,
 	});

src/component/Canvas/utils/TaskQueue.js

@@ -0,0 +1,28 @@
+export default class TaskQueue {
+	constructor() {
+		this.tasks = [];
+		this.running = false;
+	}
+	// 添加任务
+	addTask(task) {
+		this.tasks.push(task);
+		// 执行任务
+		this.executeTasks();
+	}
+	// 执行任务
+	async executeTasks() {
+		if (this.running) {
+			return;
+		}
+		this.running = true;
+		for (const task of this.tasks) {
+			await task();
+		}
+		this.running = false;
+		this.clearTasks();
+	}
+	// 清空任务队列
+	clearTasks() {
+		this.tasks = [];
+	}
+}