Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    TNO
    TNO is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    213
    Thanks
    2
    Thanked 1 Time in 1 Post

    setTimeout puzzle

    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
    Code:
    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:
    Code:
    <!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?

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    Code:
    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
          );
        }
      }
    }
    Trinithis

  • Users who have thanked Trinithis for this post:

    TNO (06-20-2008)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •