From c09f0746600ca20ffb78ecda2ee822a89e82508f Mon Sep 17 00:00:00 2001
From: Hans5958 <hans5958@outlook.com>
Date: Sat, 29 Jul 2023 19:06:38 +0700
Subject: [PATCH] Use abortController to avoid race condition

---
 web/_js/main/time.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/_js/main/time.js b/web/_js/main/time.js
index ff8a62bbf..2754b0de9 100644
--- a/web/_js/main/time.js
+++ b/web/_js/main/time.js
@@ -79,7 +79,8 @@ const dispatchTimeUpdateEvent = (period = currentPeriod, variation = currentVari
 
 async function updateBackground(newPeriod = currentPeriod, newVariation = currentVariation) {
 	abortController.abort()
-	abortController = new AbortController()
+	myAbortController = new AbortController()
+	abortController = myAbortController
 	currentUpdateIndex++
 	const myUpdateIndex = currentUpdateIndex
 	const variationConfig = variationsConfig[newVariation]
@@ -109,6 +110,7 @@ async function updateBackground(newPeriod = currentPeriod, newVariation = curren
 
 	layers.length = layerUrls.length 
 	await Promise.all(layerUrls.map(async (url, i) => {
+		const imageBlob = await (await fetch(url, { signal: myAbortController.signal })).blob()
 		const imageLayer = new Image()
 		await new Promise(resolve => {
 			imageLayer.onload = () => {
@@ -117,10 +119,14 @@ async function updateBackground(newPeriod = currentPeriod, newVariation = curren
 				layers[i] = imageLayer
 				resolve()
 			}
-			imageLayer.src = url
+			imageLayer.src = URL.createObjectURL(imageBlob)
 		})
 	}))
 
+	if (myAbortController.signal.aborted || newPeriod !== currentPeriod || newVariation !== currentVariation) {
+		return
+	}
+
 	for (const imageLayer of layers) {
 		context.drawImage(imageLayer, 0, 0)
 	}