feat: + 代码优化 & 测试数据修改

src/data.html

@@ -8,6 +8,7 @@
 		<link rel="stylesheet" href="./style/common.css" />
 		<script src="./vue.js"></script>
 		<script src="./info.js"></script>
+		<script src="./lottery.js"></script>
 	</head>
 	<body>
 		<div id="app">
@@ -27,44 +28,24 @@
 					};
 				},
 				created() {
-					setTimeout(() => {
-						this.personList = this.stressTest();
-					}, 0)
+					let startTime = Date.now()
+					this.personList = this.stressTest();
+					console.log(`执行时间：${Date.now() - startTime}ms`)
 				},
 				methods: {
-					getRandomPerson(num = 1) {
-						let candidateList = [...allPersonInfoMap.values()];
-						if (num > candidateList.length) {
-							num = candidateList.length;
-						}
-						// 该批次名单
-						let currentWinPersonMap = new Map();
-						while (currentWinPersonMap.size < num) {
-							let random = Math.floor(Math.random() * candidateList.length);
-							currentWinPersonMap.set(candidateList[random]['name'], candidateList[random]);
-						}
-						return [...currentWinPersonMap.values()];
-					},
 					stressTest(times = 100 * 10000) {
 						let map = new Map();
 						let index = 0;
+						let num = 10
 						for (; index < times; index++) {
-							let { name } = this.getRandomPerson()[0];
-							if (map.has(name)) {
-								map.set(
-									name,
-									Object.assign({}, map.get(name), {
-										[times]: (map.get(name)[times] || 0) + 1,
-									})
-								);
-							} else {
-								map.set(
-									name,
-									Object.assign({}, map.get(name), {
-										[times]: 1,
-									})
-								);
-							}
+							getRandomPerson(num, allPersonInfoMap).forEach(val => {
+								let { name } = val
+								if (map.has(name)) {
+									map.set(name, map.get(name) + 1);
+								} else {
+									map.set(name, 1)
+								}
+							})
 						}
 
 						let list = [];
@@ -72,7 +53,7 @@
 						for (const key in data) {
 							list.push({
 								name: data[key][0],
-								times: data[key][1][times],
+								times: data[key][1],
 							});
 						}
 						return list.sort((a, b) => a.times - b.times);

src/lottery.html

@@ -11,7 +11,7 @@
 		<script></script>
 	</head>
 	<body onkeydown="next(event)">
-		<div id="v1" data-num="10">
+		<div id="v1">
 			<div class="step1" v-if="step === 1">
 				<div class="title">{{awardTitle}}</div>
 				<div class="info" v-if="awardInfo">奖品：{{awardInfo}}</div>

src/lottery.js

@@ -42,29 +42,10 @@ let vue = new Vue({
 			}
 		},
 
-		/**
-		 *
-		 * @param {*} status true: 把中奖名单删除
-		 */
-		getRandomPerson() {
-			let candidateList = [...this.candidateMap.values()];
-			if (this.num > candidateList.length) {
-				this.num = candidateList.length;
-			}
-			// 该批次名单
-			let currentWinPersonMap = new Map();
-			while (currentWinPersonMap.size < this.num) {
-				let random = Math.floor(Math.random() * candidateList.length);
-				currentWinPersonMap.set(candidateList[random]['name'], candidateList[random]);
-				candidateList.splice(random, 1); // 删除中奖人员名单
-			}
-			return [...currentWinPersonMap.values()];
-		},
-
 		/**
 		 * 获取所有未中过奖名单
 		 */
-		getCandidateMap() {
+		loadCandidateMap() {
 			let winPersonStr = localStorage.getItem('yit');
 			this.candidateMap = new Map();
 			[...allPersonInfoMap.keys()].forEach(k => this.candidateMap.set(k, allPersonInfoMap.get(k)));
@@ -82,7 +63,7 @@ let vue = new Vue({
 		 * 抽奖开始
 		 */
 		start() {
-			this.getCandidateMap();
+			this.loadCandidateMap();
 			let activePersonList = [];
 			if (this.candidateMap.size === 0) {
 				let status = window.confirm('没有未中奖人员, 去往抽奖结果页面');
@@ -96,7 +77,7 @@ let vue = new Vue({
 				return;
 			}
 			this.interval = setInterval(() => {
-				this.activePersonList = this.getRandomPerson();
+				this.activePersonList = getRandomPerson(this.num, this.candidateMap);
 			}, 100);
 		},
 
@@ -106,7 +87,7 @@ let vue = new Vue({
 		 */
 		end() {
 			let winPerson = {};
-			let activePersonList = this.getRandomPerson();
+			let activePersonList = getRandomPerson(this.num, this.candidateMap);
 			if (localStorage.getItem('yit')) {
 				winPerson = JSON.parse(localStorage.getItem('yit'));
 			}
@@ -135,3 +116,22 @@ function next(event) {
 		}
 	}
 }
+
+/**
+ *
+ * @param {*} status true: 把中奖名单删除
+ */
+function getRandomPerson(num, candidateMap) {
+	let candidateList = [...candidateMap.values()];
+	if (num > candidateList.length) {
+		num = candidateList.length;
+	}
+	// 该批次名单
+	let currentWinPersonMap = new Map();
+	while (currentWinPersonMap.size < num) {
+		let random = Math.floor(Math.random() * candidateList.length);
+		currentWinPersonMap.set(candidateList[random]['name'], candidateList[random]);
+		candidateList.splice(random, 1); // 删除中奖人员名单
+	}
+	return [...currentWinPersonMap.values()];
+}

src/style/common.css

@@ -65,42 +65,3 @@ body {
 .list-item:nth-child(1) h3 {
 	padding-top: 30px;
 }
-
-.loading {
-	width: 80px;
-	height: 40px;
-	margin: 0 auto;
-	margin-top: 100px;
-}
-.loading span {
-	display: inline-block;
-	width: 8px;
-	height: 100%;
-	border-radius: 4px;
-	background: lightgreen;
-	-webkit-animation: load 1s ease infinite;
-}
-@-webkit-keyframes load {
-	0%,
-	100% {
-		height: 40px;
-		background: lightgreen;
-	}
-	50% {
-		height: 70px;
-		margin: -15px 0;
-		background: lightblue;
-	}
-}
-.loading span:nth-child(2) {
-	-webkit-animation-delay: 0.2s;
-}
-.loading span:nth-child(3) {
-	-webkit-animation-delay: 0.4s;
-}
-.loading span:nth-child(4) {
-	-webkit-animation-delay: 0.6s;
-}
-.loading span:nth-child(5) {
-	-webkit-animation-delay: 0.8s;
-}