因为浏览器的优化原因，setTimeout()和setInterval()，在浏览器窗口非激活的状态下会停止工作或者以极慢的速度工作。目前我已知就IE不会有这种问题。

这样的优化就会带来一个问题，比如我以前的一段代码【JavaScript】模拟随机号码中奖，因为需要不断随机出号码，所以会用到setInterval()，但是一旦切换窗口的话，就会停止随机算出号码，需要再次激活窗口才会重新运行。

这个时候为了让浏览器窗口在非激活状态（或者最小化）也让setTimeout、setInterval有效不休眠的话就要用到H5的新特性：Web Workers

Web Workers 是 HTML5 提供的一个javascript多线程解决方案，可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。

注意：Web Workers需要IE10及其以上的浏览器支持。

根据特性，我们可以将随机算号搬到另外个线程去计算，主线程只用不断接收数据就好了。

于是我就改了模拟随机号码的代码：

主线程JS：

var worker =new Worker("fibonacci.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
function creat_nums(caipiao_span,arr){
	var caipiao_span = document.getElementsByClassName(caipiao_span);
	for(var i = 0 ; i < caipiao_span.length; i++){
		var arr_nums = arr[i];
		if(arr_nums<10){
			arr_nums = '0'+String(arr[i]);
		}else{
			arr_nums = String(arr[i])
		}
		caipiao_span[i].innerText = arr_nums;
	}
}
 function creat_attack(){
	 var input_q = document.getElementById("input_q").value.split(",");
	 var input_h = document.getElementById("input_h").value.split(",");
	 var arr = [input_q,input_h];
	 worker.postMessage(arr);     //向worker发送数据
	 worker.onmessage =function(evt){     //接收worker传过来的数据函数
	   //console.log(evt.data);         //输出worker发送来的数据
	   var dataArr = evt.data;
	   creat_nums("caipiao35",evt.data[7]);
	   creat_nums("caipiao12",evt.data[8]);
	   document.getElementById("cishu").innerText=String(evt.data[0]);
	   document.getElementById("cishu1").innerText=String(evt.data[1]);
	   document.getElementById("cishu2").innerText=String(evt.data[2]);
	   document.getElementById("cishu3").innerText=String(evt.data[3]);
	   document.getElementById("cishu4").innerText=String(evt.data[4]);
	   document.getElementById("cishu5").innerText=String(evt.data[5]);
	   document.getElementById("cishu6").innerText=String(evt.data[6]);
	   if(evt.data[9].length===5){
		   creat_nums("caipiao35-2",evt.data[9]);
		   creat_nums("caipiao12-2",evt.data[10]);
	   }
	 }
 }

副线程JS：

// fibonacci.js
onmessage =function (evt){
  	var cishu = 0;
	var six = 0;
	var five = 0;
	var four = 0;
	var three = 0;
	var two = 0;
	var one = 0;
	var cp_q = new Array();
	var cp_h = new Array();
	var cp2_q = new Array();
	var cp2_h = new Array();
	var attack_arr = new Array();
	var timer = null;
	var arr = evt.data;
	function generate_randomx(count,nums_length) {
	  //初始化数组
	  var generated = new Array();
	  //生成数组数
	  var generatedCount = generated.length;
	  //生成nums_length个随机数
	  for(var i = 0 ; i < nums_length; i++){
		var candidate = Math.floor(Math.random() * count)+1;
		//如果生成一样的数字则重新生成
		for(var j = 0; j < generatedCount; j++) {
		  if(candidate == generated[j]){
			candidate = Math.floor(Math.random() * count)+1;
			j= -1;
		  }
		}
		generated[i] = candidate;  
		generatedCount++;
	  }
	  return generated;  
	}
	function sortNumber(a, b){
		return a - b
	}
	function creat_nums(caipiao_span,arr){
		if(caipiao_span=="caipiao35"){
			cp_q = arr;
		}
		if(caipiao_span=="caipiao12"){
			cp_h = arr;
		}
		if(caipiao_span=="caipiao35-2"){
			cp2_q = arr;
		}
		if(caipiao_span=="caipiao12-2"){
			cp2_h = arr;
		}
	}
	function creat_attack(){
		clearTimeout(timer);
		var input_q = arr[0];
		var input_h = arr[1];
		if(input_q.length<5||input_h.length<2||input_q.length>5||input_h.length>2){
			console.log("输入格式不对");
			return false;
		}
		for(var i = 0 ; i < input_q.length; i++){
			var nums_cache = parseInt(input_q[i]);
			if(nums_cache<1||nums_cache>35){
				console.log("前区范围不正确");
				return false;
				break;
			}
			attack_arr[i] = nums_cache;
		}
		for(var i = 0 ; i < input_h.length; i++){
			var nums_cache = parseInt(input_h[i]);
			if(nums_cache<1||nums_cache>12){
				console.log("后区范围不正确");
				return false;
				break;
			}
			attack_arr[i+5] = nums_cache;
		}
		cp_nums();
	}
	function cp_nums(){
		var q = generate_randomx(35,5).sort(sortNumber);
		var h = generate_randomx(12,2).sort(sortNumber);
		var z  = new Array();
		z = q.concat();
		z.push(h[0]);
		z.push(h[1]);
		timer = setTimeout(function(){
			cp_bidui(attack_arr,z,q,h);
			var arrPost = [cishu,one,two,three,four,five,six,cp_q,cp_h,cp2_q,cp2_h];
			postMessage(arrPost);
		},10);
	}
	function cp_bidui(attack,z,q,h){
		var j = 0;
		var jq = 0;
		var jh = 0;
		creat_nums("caipiao35",q);
		creat_nums("caipiao12",h);	
		for(var i=0;i<attack.length;i++){
			if(i<=4){
				for(var r=0;r<z.length-2;r++){
					if(z[r]===attack[i]){
						jq++;
					}
				}
			}
			if(i<=6&&i>4){
				for(var u=5;u<z.length;u++){
					if(z[u]===attack[i]){
						jh++;
					}
				}
			}
			if(i===6){
				if(jq===5&&jh===2){
					console.log(q);
					console.log(h);
					one++;
					q = generate_randomx(35,5).sort(sortNumber);
					h = generate_randomx(12,2).sort(sortNumber);
					creat_nums("caipiao35-2",q);
					creat_nums("caipiao12-2",h);
					return;
				}
				else if(jq===5&&jh===1){
					two++;
					cp_nums();
				}
				else if(jq===4&&jh===2||jq===5){
					three++;
					cp_nums();
				}
				else if(jq===3&&jh===2||jq===4&&jh===1){
					four++;
					cp_nums();
				}
				else if(jq===2&&jh===2||jq===3&&jh===1||jq===4){
					five++;
					cp_nums();
				}
				else if(jh===2||jq===1&&jh===1||jq===3){
					six++;
					cp_nums();
				}else{
					cp_nums();
				}
			}
		}
		cishu++;
	}
	creat_attack();
}

HTML：

<div class="item_box">
	<h2>类型1（35选中5个+12选中2个）</h2>
	<p><span>模拟中奖号码：</span><input type="text" placeholder="输入5个1-35的数字，用英文逗号隔开" class="c_input" id="input_q">+<input type="text" placeholder="输入2个1-12的数字，用英文逗号隔开" class="c_input" id="input_h"></p>
    <p class="caipiao_p"><span>当前</span><span class="caipiao35">*</span><span class="caipiao35">*</span><span class="caipiao35">*</span><span class="caipiao35">*</span><span class="caipiao35">*</span><span>+</span><span class="caipiao12">*</span><span class="caipiao12">*</span></p>
    <p class="caipiao_p"><span>下一组</span><span class="caipiao35-2">*</span><span class="caipiao35-2">*</span><span class="caipiao35-2">*</span><span class="caipiao35-2">*</span><span class="caipiao35-2">*</span><span>+</span><span class="caipiao12-2">*</span><span class="caipiao12-2">*</span></p>
    <p><span>运行次数</span><span id="cishu"></span></p>
    <p><span>六等奖次数</span><span id="cishu6"></span></p>
    <p><span>五等奖次数</span><span id="cishu5"></span></p>
    <p><span>四等奖次数</span><span id="cishu4"></span></p>
    <p><span>三等奖次数</span><span id="cishu3"></span></p>
    <p><span>二等奖次数</span><span id="cishu2"></span></p>
    <p><span>一等奖次数</span><span id="cishu1"></span></p>
    <button type="button" onClick="creat_attack()">开始</button>
</div>

CSS：

.caipiao_p span{
	padding-right:5px;
}
.item_box{
	border-bottom:1px solid #ADADAD;
	padding-bottom:10px;
}
.c_input{
	width:210px;
	font-size:12px;
}

点击DEMO预览