js模拟实现进程多级反馈队列调度，UI框架需要网络加载，有本地使用需要请确认网络连接
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>进程调度：多级反馈队列调度算法</title> 9 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 10 integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 11 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 12 <style> 13 * { 14 margin: 0; 15 padding: 0; 16 } 17 18 #app {} 19 20 .addTaskBtn { 21 border: 1px solid white; 22 border-radius: 5px; 23 float: right; 24 margin-top: 20px; 25 } 26 27 .taskContainer { 28 margin-top: 50px; 29 background-color: white; 30 height: 200px; 31 margin-left: 50px; 32 margin-right: 50px; 33 border: 1px solid white; 34 border-radius: 10px; 35 overflow: scroll; 36 } 37 38 .middleContainer { 39 margin: 50px auto; 40 padding-top: 50px; 41 background: gray; 42 height: 600px; 43 width: 800px; 44 border: 5px solid white; 45 border-radius: 50px; 46 overflow: hidden; 47 } 48 </style> 49 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 50 <script src="https://unpkg.com/element-ui/lib/index.js"></script> 51 </head> 52 53 <body> 54 <div id="app"> 55 <div class="middleContainer"> 56 <div class="title"> 57 <p style="text-align: center;">{{title}}</p> 58 </div> 59 <div class="addTaskContainer" style="padding: 10px 100px 10px;"> 60 61 <div class="input-group"> 62 <span class="input-group-addon">进程id</span> 63 <input type="number" class=" form-control" v-model="taskId"> 64 </div> 65 <br> 66 <div class="input-group"> 67 <span class="input-group-addon">进程优先级</span> 68 <select v-model="taskOp" class="form-control"> 69 <option v-for="op in opNum" :key="op" :value="op-1">{{op-1}}</option> 70 </select> 71 </div> 72 <br> 73 <div class="input-group"> 74 <span class="input-group-addon">进程所需时间片</span> 75 <input type="number" class="form-control" v-model="taskTime"> 76 </div> 77 <input type="button" class="btn btn-default addTaskBtn" @click="addTask" value="添加"> 78 </div> 79 <div class="taskContainer"> 80 <ol v-infinite-scroll="load" style="overflow:auto" infinite-scroll-disabled="disabled"> 81 <li v-for="(item, index) in taskDoing" :key="index" style="display: flex;"> 82 <p style="margin: 10px;">process id: {{item.getId()}}</p> 83 <p style="margin: 10px;">process allTime:{{item.getAllTime()}}</p> 84 <p style="margin: 10px;">process progressTime:{{item.getProgressTime()}}</p> 85 <p style="margin: 10px;">process leftTime:{{item.getLeftTime()}}</p> 86 </li> 87 </ol> 88 </div> 89 </div> 90 </div> 91 92 93 <script> 94 95 class Task { 96 constructor(id, time) { 97 this.id = id; 98 this.allTime = time; 99 this.progressTime = 0; 100 this.leftTime = time; 101 this.isDone = false; 102 } 103 progress(time) { 104 this.progressTime += time; 105 this.progressTime = Math.min(this.allTime, this.progressTime); 106 this.leftTime = this.allTime - this.progressTime; 107 if (this.leftTime == 0) 108 this.isDone = true; 109 console.log("id:" + this.id + ", progressTime: " + this.progressTime + ", leftTime: " + this.leftTime); 110 } 111 getIsDone() { 112 return this.isDone; 113 } 114 getId() { 115 return this.id; 116 } 117 getProgressTime() { 118 return this.progressTime; 119 } 120 getAllTime() { 121 return this.allTime; 122 } 123 getLeftTime() { 124 return this.leftTime; 125 } 126 } 127 128 class Queue { 129 constructor(time) { 130 this.data = new Array(); 131 this.time = time; 132 } 133 front() { 134 if (this.data.length == 0) 135 throw new Error("the queue is empty"); 136 return this.data[0]; 137 } 138 remove(idx) { 139 if (idx < 0 || idx > this.data.length) 140 throw new Error("index out of bound"); 141 this.data.splice(idx, 1); 142 } 143 popFront() { 144 this.remove(0); 145 } 146 147 push(task) { 148 this.data.push(task); 149 } 150 isEmpty() { 151 return this.data.length == 0; 152 } 153 progress(next) { 154 let task = this.front(); 155 task.progress(this.time); 156 this.popFront(); 157 if (!task.getIsDone()) { 158 next.push(task); 159 } 160 return task; 161 } 162 163 } 164 165 window.onload = () => { 166 if (!window.navigator.onLine) 167 alert("此系统需联网，请检查网络连接"); 168 } 169 170 171 let app = new Vue({ 172 el: "#app", 173 data: { 174 opNum: 7, 175 timeSlice: [1, 2, 5, 10, 20, 50, 100], 176 taskId: Math.round(Math.random() * 100), 177 taskOp: 1, 178 taskTime: Math.round(Math.random() * 1000), 179 taskDoing: [], 180 taskDoingLength: 0, 181 que: [], 182 set: new Set(), 183 timeId: 0, 184 disabled: false, 185 title: "进程调度-多级反馈队列调度算法实现", 186 187 }, 188 mounted() { 189 for (let i = 0; i < this.opNum; i++) 190 this.que.push(new Queue(this.timeSlice[i])); 191 }, 192 methods: { 193 addTask() { 194 if (this.set.has(this.taskId)) { 195 this.openWarning("请确保进程id唯一"); 196 return; 197 } 198 this.que[this.taskOp].push(new Task(this.taskId, this.taskTime)) 199 this.set.add(this.taskId); 200 this.openSuccess("添加成功"); 201 this.run(); 202 203 }, 204 run() { 205 if (!this.timeId) { 206 this.timeId = setInterval(() => { 207 let flag = false; 208 for (let i = 0; i < this.opNum; i++) 209 if (!this.que[i].isEmpty()) { 210 let task = null; 211 if (i == this.opNum - 1) 212 task = this.que[i].progress(this.que[i]); 213 else 214 task = this.que[i].progress(this.que[i + 1]); 215 let list = new Array(); 216 let f = false; 217 this.taskDoing.forEach((x, i) => { 218 219 if (x.getId() == task.getId()) { 220 list.unshift(task); 221 f = true; 222 } 223 else { 224 list.push(x); 225 } 226 }); 227 if (!f) 228 list.unshift(task); 229 this.taskDoing = list; 230 flag = true; 231 break; 232 } 233 if (!flag) { 234 this.openSuccess("所有等待进程已经执行完毕") 235 clearInterval(this.timeId); 236 this.timeId = 0; 237 } 238 }, 1000); 239 } 240 }, 241 openTips(str) { 242 this.$message(str); 243 }, 244 openSuccess(str) { 245 this.$message({ 246 message: str, 247 type: 'success' 248 }); 249 }, 250 251 openWarning(str) { 252 this.$message({ 253 message: str, 254 type: 'warning' 255 }); 256 }, 257 258 openError(str) { 259 this.$message.error(str); 260 }, 261 load() { 262 263 } 264 }, 265 computed: { 266 }, 267 }); 268 </script> 269 </body> 270 271 </html>