在javascript中用command模式模拟多线程
2005-06-09 13:31
435 查看
作者:emu(黄希彤)今天和徐鹏程msn的时候聊起javascript不支持多线程。以前也看过有高手在wsh上可以创建thread对象，但是毕竟不是常规手段，我们做web应用一般没有本地访问权限的，用activex的没试过，毕竟也不是javascript方式。
以前我们解决这样的问题都是针对具体问题写一段代码来模拟多线程的，但是由于往往要对没个线程单独编码，这样的代码十分冗长。学习设计模式的时候就曾经考虑过在javascript中实用command模式来更好的模拟多线程，但是一直没有付诸实施，今天既然想起来了就试试看：
1
<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
17
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
32
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
42
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
54
window.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准备的。
在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;
}
var commandList = [];
var nAction = 0;
var functionConstructor = function(){}.constructor;
function executeCommands(){
for (var i=0;i<nAction;i++)
if (commandList.length>0){
var command = commandList.shift();
if (command.constructor == functionConstructor)
if (command.scheduleTime == null || new Date()-command.scheduleTime>0)
command();
else
commandList.push(command);
}
}
function startNewTask(){
var resultTemp = document.getElementById("sampleResult").cloneNode(true);
with (resultTemp){
id="";style.display="block";style.color=(Math.floor(Math.random()* (1<<23)).toString(16)+"00000").substring(0,6);
}
document.body.insertBefore(resultTemp,document.body.lastChild);
commandList.push(function(){simThread(resultTemp,1);});
nAction++;
}
function simThread(temp,n){
if (temp.stop) n--;
else temp.innerHTML = temp.innerHTML - (-n);
if (n<1000)
commandList.push(function(){simThread(temp,++n)});
else{
var command = function(){document.body.removeChild(temp);;nAction--;};
command.scheduleTime = new Date()-(-2000);
commandList.push(command);
}
}
setInterval("executeCommands()",1);
//-->
</SCRIPT>
<button onclick="startNewTask()">开始新线程</button>
<BR><BR>
<div id=sampleResult onmouseover="this.stop=true" onmouseout="this.stop=false" style="display:none;cursor:hand">0</div>
点击这里看效果
以前我们解决这样的问题都是针对具体问题写一段代码来模拟多线程的，但是由于往往要对没个线程单独编码，这样的代码十分冗长。学习设计模式的时候就曾经考虑过在javascript中实用command模式来更好的模拟多线程，但是一直没有付诸实施，今天既然想起来了就试试看：
1
<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
17
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
32
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
42
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
54
window.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准备的。
在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;
}
var commandList = [];
var nAction = 0;
var functionConstructor = function(){}.constructor;
function executeCommands(){
for (var i=0;i<nAction;i++)
if (commandList.length>0){
var command = commandList.shift();
if (command.constructor == functionConstructor)
if (command.scheduleTime == null || new Date()-command.scheduleTime>0)
command();
else
commandList.push(command);
}
}
function startNewTask(){
var resultTemp = document.getElementById("sampleResult").cloneNode(true);
with (resultTemp){
id="";style.display="block";style.color=(Math.floor(Math.random()* (1<<23)).toString(16)+"00000").substring(0,6);
}
document.body.insertBefore(resultTemp,document.body.lastChild);
commandList.push(function(){simThread(resultTemp,1);});
nAction++;
}
function simThread(temp,n){
if (temp.stop) n--;
else temp.innerHTML = temp.innerHTML - (-n);
if (n<1000)
commandList.push(function(){simThread(temp,++n)});
else{
var command = function(){document.body.removeChild(temp);;nAction--;};
command.scheduleTime = new Date()-(-2000);
commandList.push(command);
}
}
setInterval("executeCommands()",1);
//-->
</SCRIPT>
<button onclick="startNewTask()">开始新线程</button>
<BR><BR>
<div id=sampleResult onmouseover="this.stop=true" onmouseout="this.stop=false" style="display:none;cursor:hand">0</div>
点击这里看效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript用Command模式模拟多线程
- 在Javascript中用command模式模拟多线程，包含注释
- JavaScript用Command模式模拟多线程
- 在Javascript中用command模式模拟多线程，包含注释
- Javascript模拟多线程
- Javascript模拟多线程
- 关于使用Javascript来模拟多线程的一点想法
- 用fason的参数化定时器在javascript中模拟多线程
- 用javascript模拟多线程
- JavaScript 用DIV模拟弹出窗口并跟随窗体滚动
- JavaScript可否多线程? 深入理解JavaScript定时机制
- java多线程学习之死锁的模拟和避免
- SHELL模拟多线程脚本的详细注解
- JavaScript模拟鼠标右键菜单效果
- Linux下模拟多线程的并发并发shell脚本
- JavaScript模拟push
- JavaScript模拟重力状态下抛物运动的方法
- javascript动画系列之模拟滚动条
- JavaScript多线程
- 通过Javascript模拟登陆Windows认证的网站