Question

js多线程 大神求解救

<canvas id="aaa" width="400px" height="400px" style=" background:#000;"></canvas>
<span id="aa"></span>
<script type="text/JavaScript">
var cxt = document.getElementById("aaa").getContext("2d");
var amount = 2;
var rect = new Array();
rect[0] = new Rect(0,"s");
rect[1] = new Rect(50,"w");
window.setInterval("rect["+0+"].run()",50);
window.setInterval("rect["+1+"].run()",50);
function draw(rect){
cxt.fillStyle = "#FFFF00";
cxt.fillRect(0,rect.y,30,30);
}
function Rect(y,direct){
this.rect = draw;
this.rect(y,direct);
this.y = y;
this.touch = false;
this.direct = direct;
this.run = function(){
switch(this.direct){
case "w":
if(this.y > 0 && isTouch(this) != true){
this.y--;
}
break;
case "s":
if(this.y < 370 && isTouch(this) != true){
this.y++;
}
break;
}
}
}
function isTouch(aaa){
var touch = false;
var r = aaa;
for(var i=0;i<rect.length;i++){
if(r == rect[i]){
break;
}
else{
switch(r.direct){
case "w":
if(r.y >= rect[i].y && r.y<= rect[i].y +30){
touch = true;
}
break;
case "s":
if(r.y + 30 >= rect[i].y && r.y +30 <= rect[i].y +30){
touch = true;
}
break;
}
}
}
return touch;
}
function flash(){
cxt.clearRect(0,0,400,400);
for(var i=0;i<amount;i++){
draw(rect[i]);
}
document.getElementById("aa").innerHTML = rect[0].y + " " + rect[1].y;
}
flash();
window.setInterval("flash()",100);
</script>
互相碰撞的时候只有后面的对象停止时什么原因？

Answer 1

首先，你要知道客户端的js是没有所谓的多线程的，执行的顺序都是从上到下的
然后你的问题就明白了吧