...

View Full Version : setTimeout puzzle



TNO
06-20-2008, 03:52 AM
I'm not sure what I'm missing here, but for some reason the setTimeout method is executing all at once instead of chaining one after another as I expect it to: (under this.start)

Animation.js


function Animation(el){
var queue = [];
var pos = 0; //position in queue
var me = this;

function _getX(){
// To do: runtime style
return parseInt(el.style.left,10);
};

function _getY(){
// To do: runtime style
return parseInt(el.style.top,10);
};

function _moveBy(obj){
// To do: +/-
_setX(_getX() + obj.x);
_setY(_getY() + obj.y);
if(obj.callBack){
obj.callBack();
}
};

function _moveTo(obj){
// To do: +/-
_setX(obj.x);
_setY(obj.y);
if(obj.callBack){
obj.callBack();
}
};

function _setX(x){
el.style.left = x + "px";
};

function _setY(y){
el.style.top = y + "px";
};

this.start = function(ms){
var obj = queue[pos];
if(obj){
obj.action(obj);
pos++;
window.setTimeout(me.start,ms);
}
};
this.moveBy = function(obj){ //{x:100, y:100, callBack:fn}
obj.action = _moveBy;
queue[queue.length] = obj;
return me;
};
this.moveTo = function(obj){ //{x:100, y:100, callBack:fn}
obj.action = _moveTo;
queue[queue.length] = obj;
return me;
};

}


html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Animation</title>

<style type="text/css">
button{
position:absolute;
width:100px
}
</style>

<script type="text/javascript" src="Animation.js"></script>

<script type="text/javascript">
function test(){
var Actor = new Animation(document.getElementById("Actor"));

Actor
.moveBy({x:10,y:10})
.moveBy({x:10,y:10})
.moveBy({x:40,y:50})
.moveBy({x:100,y:5})
.moveBy({x:50,y:50})
.moveBy({x:0,y:50})
.moveTo({x:100,y:100})
.moveBy({x:10,y:0})
.moveBy({x:10,y:0})
.moveBy({x:101,y:10})
.moveBy({x:0,y:10})
.moveBy({x:0,y:100})
.moveTo({x:10,y:10,callBack:function(){
alert("Complete!");
}})
.start(1000);
}
</script>

</head>
<body>
<button id="Actor" style="top:10px;left:10px" onclick="test()">Test</button>
</body>
</html>


Any ideas?

Trinithis
06-20-2008, 07:48 AM
Function.bundle = function(context, f, args) {
if(typeof f == "string" && context)
f = context[f];
if(arguments.length < 3)
args = [];
else if(!(args instanceof Array))
args = Array.prototype.slice.call(arguments, 2);
return function() {
return f.apply(context, args);
};
}

function Animation(el) {
var queue = [];
var pos = 0; // position in queue

var getX = function() {
// To do: runtime style
return parseInt(el.style.left,10);
};

var getY = function() {
// To do: runtime style
return parseInt(el.style.top,10);
};

var moveBy = function(obj) {
// To do: +/-
setX(getX() + obj.x);
setY(getY() + obj.y);
if(obj.callBack){
obj.callBack();
}
};

var moveTo = function(obj) {
// To do: +/-
setX(obj.x);
setY(obj.y);
if(obj.callBack){
obj.callBack();
}
};

var setX = function(x) {
el.style.left = x + "px";
};

var setY = function(y) {
el.style.top = y + "px";
};

this.moveBy = function(obj) { // {x:100, y:100, callBack:fn}
obj.action = moveBy;
queue.push(obj);
return this;
};

this.moveTo = function(obj) { // {x:100, y:100, callBack:fn}
obj.action = moveTo;
queue.push(obj);
return this;
};

this.start = function(ms) {
var obj = queue[pos];
if(obj) {
obj.action(obj);
pos++;
setTimeout(
Function.bundle(this, "start", ms), ms
);
}
}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum