用javascript模拟多线程

 以前我们解决这样的问题都是针对具体问题写一段代码来模拟多线程的，但是由于往往要对没个线程单独编码，这样的代码十分冗长。学习设计模式的时候就曾经考虑过在javascript中实用command模式来更好的模拟多线程，但是一直没有付诸实施，今天既然想起来了就试试看：

www.jiedichina.com,南京捷帝科技

 1 < html >< head >< title > emu -- 用command模式模拟多线程 </ title ></ head >< body >
 2 < SCRIPT  LANGUAGE ="JavaScript" >
 3<!--
 4if (Array.prototype.shift==null)
 5Array.prototype.shift = function (){
 6    var rs = this[0];
 7    for (var i=1;i<this.length;i++) this[i-1]=this[i]
 8    this.length=this.length-1
 9    return rs;
10}
11if (Array.prototype.push==null)
12Array.prototype.push = function (){
13    for (var i=0;i<arguments.length;i++) this[this.length]=arguments[i];
14    return this.length;
15}
16
17var commandList = [];
18var nAction = 0;//控制每次运行多少个动作
19var functionConstructor = function(){}.constructor;
20function executeCommands(){
21    for (var i=0;i<nAction;i++)
22        if (commandList.length>0){
23            var command = commandList.shift();
24            if (command.constructor == functionConstructor)
25                if (command.scheduleTime == null || new Date()-command.scheduleTime>0)
26                    command();
27                else
28                    commandList.push(command);
29        }
30}
31
32function startNewTask(){
33    var resultTemp = document.getElementById("sampleResult").cloneNode(true);
34    with (resultTemp){
35    id="";style.display="block";style.color=(Math.floor(Math.random()* (1<<23)).toString(16)+"00000").substring(0,6);
36    }
37    document.body.insertBefore(resultTemp,document.body.lastChild);
38    commandList.push(function(){simThread(resultTemp,1);});
39    nAction++;
40}
41
42function  simThread(temp,n){
43    if (temp.stop) n--;
44    else temp.innerHTML = temp.innerHTML - (-n);
45    if (n<1000)
46        commandList.push(function(){simThread(temp,++n)});
47    else{
48        var command = function(){document.body.removeChild(temp);;nAction--;};
49        command.scheduleTime = new Date()-(-2000);
50        commandList.push(command);
51    }
52}
53
54window.onload = function(){setInterval("executeCommands()",1);}
55//-->
56 </ SCRIPT >
57 < button  onclick ="startNewTask()" > 开始新线程 </ button >
58
59 < BR >< BR >
60 < div  id =sampleResult  onmouseover ="this.stop=true"  onmouseout ="this.stop=false"  style ="display:none;cursor:hand" > 0 </ div >
61 </ body >
62 </ html >

        注意第26行。javascript里面函数也是对象，所以就没有必要把函数调用包装到do或者execute方法里面了，直接用()就可以让函数对象运行起来：
command();

        shift和push函数是javascript中array对象的函数，可是IE5居然没有定义，最前面两个函数是为IE5准备的。

下面是另一种简单的实现方法，比较明确

function Thread(_task,_delay)  
{ 
 j = 0;
    this.timerID=0;  
    this.delay=_delay;  
    this.task=_task;          
    this.start=function()  
    {  
      this.timerID=window.setInterval(this.task,this.delay);  
    }     
    this.stop=function()  
    {  
      window.clearInterval(this.timerID);  
    }  
}  
 
//用法, 传一个线程函数, 一个时间间隔 
var mainThread=new Thread(loadData,300);

       www.jiedichina.com,南京捷帝科技