进程调度-多级反馈队列调度模拟

 

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>
View Code
posted @ 2020-01-01 17:57  mool  阅读(540)  评论(0)  编辑  收藏  举报