在javascript中用command模式模拟多线程

最新推荐文章于 2025-03-30 21:39:55 发布

emu

最新推荐文章于 2025-03-30 21:39:55 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

文章标签： command javascript 多线程 function button null

本文链接：https://blog.youkuaiyun.com/emu/article/details/390955

作者与徐鹏程交流时谈及JavaScript不支持多线程，以往解决此类问题需针对具体问题编写冗长代码模拟多线程。作者曾考虑用Command模式模拟多线程，此次付诸实践。还提到JavaScript里函数可直接运行，以及为IE5准备相关函数，代码在IE和FireFox下通过。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者:emu(黄希彤)今天和徐鹏程msn的时候聊起javascript不支持多线程。以前也看过有高手在wsh上可以创建thread对象，但是毕竟不是常规手段，我们做web应用一般没有本地访问权限的，用activex的没试过，毕竟也不是javascript方式。

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

< html >< head >< title > emu -- 用command模式模拟多线程 </ title ></ head >< body >
2

< SCRIPT LANGUAGE ="JavaScript" >
3

<!--
4

if (Array.prototype.shift==null)
5

Array.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

}
11

if (Array.prototype.push==null)
12

Array.prototype.push = function (){
13

for (var i=0;i<arguments.length;i++) this[this.length]=arguments[i];
14

return this.length;
15

}
16

var commandList = [];
18

var nAction = 0;//控制每次运行多少个动作
19

var functionConstructor = function(){}.constructor;
20

function 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

function 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

function 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

window.onload = function(){setInterval("executeCommands()",1);}
55

//-->
56

</ SCRIPT >
57

< button onclick ="startNewTask()" > 开始新线程 </ button >
58

< 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准备的。

        在IE和FireFox下面通过作者:emu(黄希彤)。

<SCRIPT LANGUAGE="JavaScript">
<!--
if (Array.prototype.shift==null)
Array.prototype.shift = function (){
	var rs = this[0];
	for (var i=1;i<this.length;i++) this[i-1]=this[i]
	this.length=this.length-1
	return rs;
}
if (Array.prototype.push==null)
Array.prototype.push = function (){
	for (var i=0;i<arguments.length;i++) this[this.length]=arguments[i];
	return this.length;
}

setInterval("executeCommands()",1);
//-->
</SCRIPT>
<button onclick="startNewTask()">开始新线程</button>