今天下午要模拟一个多任务工作的场景,就是随机分配几个任务,每个任务运行的时间不一样,各自运行,中间模拟结果输出,到了规定的时间则任务完成计时器截止。
这个问题看似很简单,我也没有多想,使用了setInterval函数来做,结果就遇到了JavaScript中的setInterval函数不接收参数的问题。
//生成随机任务
let i=0;
for(let i=1;i<=3;i++){
let kk=Math.floor( Math.random() * 10 + 1 );
setTimeout(ToDo(i,kk),1000);
}
function ToDo(TaskNumber,ExecteTime){
i=i+1;
console.log(`第${TaskNumber}号任务在${ExecteTime}秒后执行完毕。${i}`)
}
上面的代码中i的值并不会变化,普通方式并不能传递参数,可以使用JavaScript中的立即函数解决了这个问题。
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模拟多任务执行</title>
</head>
<body>
<script>
function ToDo(TaskNumber,ExecteTime){
let SecondCount=0;
let timerID=setInterval(
function(){
return (function Task(TaskNumber,ExecteTime){
SecondCount=SecondCount+1;
console.log(`第${TaskNumber}号任务正在执行中...目前执行时间:${SecondCount}`)
if(SecondCount>=ExecteTime){
console.log(`第${TaskNumber}号任务在${ExecteTime}秒后执行完毕。`)
clearInterval(timerID);
}
})(TaskNumber,ExecteTime)
},1000);
}
//生成随机任务
for(let i=1;i<=3;i++){
let kk=Math.floor( Math.random() * 10 + 1 );
console.log(`第${i}号任务【执行时间:${kk}】开始执行。`)
ToDo(i,kk);
// setTimeout(`ToDo(${i},${kk})`,kk*1000);
}
</script>
</body>
</html>
输出结果:
下面是倒计时代码:
//倒计时
let i=1;
let kk=Math.floor( Math.random() * 10 + 1 );
timerID=setInterval(`ToDo(${i},${kk})`,1000);
console.log(`第${i}号任务【执行时间:${kk}】开始执行。`);
var ToDo=(function(){
var praiseCount=0;//计数
return function praise(){
praiseCount=praiseCount+1;
if(praiseCount>=kk){
console.log(`第${i}号任务在${kk}秒后执行完毕。`)
clearInterval(i);
}else{
console.log(`第${i}号任务的计时器:${praiseCount}`);
}
};
})(i,kk)