首页 Javascript 正文
210

Html5多线程

Html5通过Worker对象实现多线程。目前支持的浏览器不多,即使支持也表现并不怎么样。主要表现在worker线程中如果有http请求,多个线程同时跑的时候容易出现故障(表现为某几个请求无故中断),即使所有worker都运行成功,所耗费的时间并不比尾调用方式快,甚至更慢。
下面用几段代码来示范一下Worder的用法。
main.js
function ThreadManager(num, script, data, onSucc, onError, onFinish){
	num = +num || 1;
	if(!script) throw 'script required';
	this.num = num;
	this.workers = [];
	this.finishedWorkers = [];
	this.finishedAll = false;
	var self = this;
	for(var i=0; i<num; i++){
		var worker = new Worker(script); //script必须得是一个本域的js文件路径。
		worker.postMessage({id:i, data:data[i]}); //启动线程,并向线程发送数据
		worker.onmessage = function(event){
                        //worker线程post给主线程的数据从这里接收
			var signal = event.data;//线程worker投送过来的数据
			self.notify(signal);
		}
		this.workers.push({'id':i, 'worker': worker});
	}
	
       //终止所有线程
	this.stop = function (){
		for(var i=0, t=this.workers.length; i<t; i++){
			this.workers[i].worker.terminate();
		}
	}
	
	this.notify = function(signal){
                //每个线程投送过来的数据都会到达这里进行处理,
                //我们可以在这里判断所有线程是否都结束。
		var tid = +signal.id, flag = signal.flag, result = signal.result;
		if('finshed' == flag){ 
			this.finishedWorkers.push(tid);
			if(this.finishedWorkers.length == this.num){
				this.finishedAll = true;
				typeof(onFinish) == 'function' && onFinish();
			}
		}
	}
	
}
//调用
var threads = new ThreadManager(5, 'worker.js', [34,12,8,56,3], function (data){
      //all thread finished
});
worker.js
(function(){
	function postToMain(id, flag, result ){
                //向主线程投送数据
		postMessage({ id:id, flag: flag, result: result});
	}
	onmessage = function(event){
                //接收主线程投送的数据
		var data = event.data;
                //do something
		postToMain(id, 'finshed', {msg:'success', data:data*2});		
	}
})();

正在加载评论...