用fason的参数化定时器在javascript中模拟多线程
原帖子发表在 http://community.csdn.net/Expert/TopicView.asp?id=4069144
author:emu(黄希彤)
有csdn的朋友把 http://community.csdn.net/Expert/TopicView.asp?id=3191873 给翻了出来，这样在javascript中模拟多线程又有了更漂亮的做法了：
<html><head><title>emu -- 用fason的参数化定时器模拟多线程</title></head><body> <SCRIPT LANGUAGE="JavaScript"> <!-- var _st = window.setTimeout; window.setTimeout = function(fRef, mDelay) { if(typeof fRef == 'function'){ var argu = Array.prototype.slice.call(arguments,2); var f = (function(){ fRef.apply(null, argu); }); return _st(f, mDelay); } return _st(fRef,mDelay); } var _int = window.setInterval; window.setInterval = function(fRef, mDelay) { if(typeof fRef == 'function'){ var argu = Array.prototype.slice.call(arguments,2); var f = (function(){ fRef.apply(null, argu); }); return _int(f, mDelay); } return _st(fRef,mDelay); } function startNewTask(){ var target = document.getElementById("sampleResult").cloneNode(true); with (target){ id="";style.display="block";style.color=(Math.floor(Math.random()* (1<<23)).toString(16)+"00000").substring(0,6); } document.body.insertBefore(target,document.body.lastChild); var parameter = {target:target,n:0,result:0} parameter.timer = setInterval(count,1,parameter); } function count(parameter){ with (parameter){ if (!target.stop){ for(var i=0;i<speed;i++) if (n<MAX) result += ++n; target.innerHTML = result; } if (n>=MAX){ clearInterval(timer); setTimeout(function(elm){document.body.removeChild(elm)},2000,target); } } } var speed = 1111; var MAX=100000; //--> </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> </body> </html> 点击这里看效果 在IE6和firefox1.5下面通过
有的时候command模式也许不是最好的办法，比如我之前写的例子。写那个例子纯粹只是为了演示command确实可以用在javascript中，并不表示我们任何时候都应该优先考虑这样做。 至于command模式本身，我仍认为它是最简洁优美的模式之一，在我们用各种语言解决问题的时候都可以考虑使用它，而不止于j2se。 套一句名言：如果你的工具箱里面只有榔头这一样工具，那么每个问题在你的眼里看起来都象钉子 author:emu(黄希彤)。
有csdn的朋友把 http://community.csdn.net/Expert/TopicView.asp?id=3191873 给翻了出来，这样在javascript中模拟多线程又有了更漂亮的做法了：
1
![]()
<
html
><
head
><
title
>
emu -- 用fason的参数化定时器模拟多线程
</
title
></
head
><
body
>
2![]()
![]()
<
SCRIPT
LANGUAGE
="JavaScript"
>
![]()
3![]()
<!--
4![]()
5![]()
var _st = window.setTimeout;
6![]()
![]()
window.setTimeout = function(fRef, mDelay) ![]()
{
7![]()
![]()
if(typeof fRef == 'function')![]()
{
8![]()
var argu = Array.prototype.slice.call(arguments,2);
9![]()
![]()
var f = (function()![]()
{ fRef.apply(null, argu); });
10![]()
return _st(f, mDelay);
11![]()
}
12![]()
return _st(fRef,mDelay);
13![]()
}
14![]()
15![]()
var _int = window.setInterval;
16![]()
![]()
window.setInterval = function(fRef, mDelay) ![]()
{
17![]()
![]()
if(typeof fRef == 'function')![]()
{
18![]()
var argu = Array.prototype.slice.call(arguments,2);
19![]()
![]()
var f = (function()![]()
{ fRef.apply(null, argu); });
20![]()
return _int(f, mDelay);
21![]()
}
22![]()
return _st(fRef,mDelay);
23![]()
}
24![]()
25![]()
26![]()
![]()
function startNewTask()![]()
{
27![]()
var target = document.getElementById("sampleResult").cloneNode(true);
28![]()
![]()
with (target)![]()
{
29![]()
id="";style.display="block";style.color=(Math.floor(Math.random()* (1<<23)).toString(16)+"00000").substring(0,6);
30![]()
}
31![]()
document.body.insertBefore(target,document.body.lastChild);
32![]()
![]()
var parameter = ![]()
{target:target,n:0,result:0}
33![]()
parameter.timer = setInterval(count,1,parameter);
34![]()
}
35![]()
36![]()
![]()
function count(parameter)![]()
{
37![]()
![]()
with (parameter)![]()
{
38![]()
![]()
if (!target.stop)![]()
{
39![]()
for(var i=0;i<speed;i++)
40![]()
if (n<MAX) result += ++n;
41![]()
target.innerHTML = result;
42![]()
}
43![]()
![]()
if (n>=MAX)![]()
{
44![]()
clearInterval(timer);
45![]()
![]()
setTimeout(function(elm)![]()
{document.body.removeChild(elm)},2000,target);
46![]()
}
47![]()
}
48![]()
}
49![]()
50![]()
var speed = 1111;
51![]()
var MAX=100000;
52![]()
//-->
53![]()
</
SCRIPT
>
54![]()
<
button
onclick
="startNewTask()"
>
开始新线程
</
button
>
55![]()
56![]()
<
BR
><
BR
>
57![]()
<
div
id
=sampleResult
onmouseover
="this.stop=true"
onmouseout
="this.stop=false"
style
="display:none;cursor:hand"
>
0
</
div
>
58![]()
</
body
>
59![]()
</
html
>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<html><head><title>emu -- 用fason的参数化定时器模拟多线程</title></head><body> <SCRIPT LANGUAGE="JavaScript"> <!-- var _st = window.setTimeout; window.setTimeout = function(fRef, mDelay) { if(typeof fRef == 'function'){ var argu = Array.prototype.slice.call(arguments,2); var f = (function(){ fRef.apply(null, argu); }); return _st(f, mDelay); } return _st(fRef,mDelay); } var _int = window.setInterval; window.setInterval = function(fRef, mDelay) { if(typeof fRef == 'function'){ var argu = Array.prototype.slice.call(arguments,2); var f = (function(){ fRef.apply(null, argu); }); return _int(f, mDelay); } return _st(fRef,mDelay); } function startNewTask(){ var target = document.getElementById("sampleResult").cloneNode(true); with (target){ id="";style.display="block";style.color=(Math.floor(Math.random()* (1<<23)).toString(16)+"00000").substring(0,6); } document.body.insertBefore(target,document.body.lastChild); var parameter = {target:target,n:0,result:0} parameter.timer = setInterval(count,1,parameter); } function count(parameter){ with (parameter){ if (!target.stop){ for(var i=0;i<speed;i++) if (n<MAX) result += ++n; target.innerHTML = result; } if (n>=MAX){ clearInterval(timer); setTimeout(function(elm){document.body.removeChild(elm)},2000,target); } } } var speed = 1111; var MAX=100000; //--> </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> </body> </html> 点击这里看效果 在IE6和firefox1.5下面通过
有的时候command模式也许不是最好的办法，比如我之前写的例子。写那个例子纯粹只是为了演示command确实可以用在javascript中，并不表示我们任何时候都应该优先考虑这样做。 至于command模式本身，我仍认为它是最简洁优美的模式之一，在我们用各种语言解决问题的时候都可以考虑使用它，而不止于j2se。 套一句名言：如果你的工具箱里面只有榔头这一样工具，那么每个问题在你的眼里看起来都象钉子 author:emu(黄希彤)。