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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts

    Adding a delay to my script

    Here's my code.

    Code:
    function Bullet(ID) {
        this.ID = ID;
        this.bullet;
        this.load = function() {
            var left = Math.floor((Math.random()*100)+1);
            var Div = document.createElement("div");
            Div.setAttribute("class", "bullet");
            Div.setAttribute("ID", "B"+this.ID);
            Div.setAttribute("style", 'left:'+left+'%');
            
            document.body.appendChild(Div);
            
            this.bullet = document.getElementById('B'+this.ID);
        };
        
        this.move = function() {
            var top = 0;
            var bullet1 = this.bullet;
            while (top < 75)
            {
                top++;
                bullet1.style.marginTop = top+'%';
            }
        };
    };
    In the while function in this.move I want it to be delayed, so every e.g. 100 milliseconds it adds 1%. How can I do this? I don't really want to have to use jQuery if possible.

    Here's the same bit with jQuery.

    Code:
    $('#B'+this.ID).animate({'top': '75%'}, 3000, function(){
                element = document.getElementById("B"+ID);
                element.parentNode.removeChild(element);
            });
    That work's fine, I'd just like to know how to do this without needing jQuery.
    Last edited by tomharto; 06-06-2013 at 12:26 PM.

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    Try this out...
    PHP Code:
    function Bullet(IDselfObject) {
      
    this.ID ID;
      
    this.bullet;

      var 
    self selfObject;

      
    this.load = function() {
        var 
    left Math.floor((Math.random()*100)+1);
        
    this.bullet document.createElement("div");
        
    this.bullet.setAttribute("class""bullet");
        
    this.bullet.setAttribute("ID""B"+this.ID);
        
    this.bullet.setAttribute("style"'left:'+left+'%');

        
    document.body.appendChild(this.bullet);
      }

      
    this.move = function(top) {
        
    top top || 0;
        if(
    top 75) {
            
    top++;
            
    this.bullet.style.marginTop top+'%';
            
    setTimeout(self '.move(' top ')'100);
        }
      }
    }
    var 
    = new Bullet(1'b');
    b.load();
    b.move();

    var 
    = new Bullet(1'c');
    c.load();
    c.move(); 

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by niralsoni View Post
    Try this out...
    PHP Code:
    function Bullet(IDselfObject) {
      
    this.ID ID;
      
    this.bullet;

      var 
    self selfObject;

     ...
           
            
    setTimeout(self '.move(' top ')'100); 
    does that work? i don't see how self.move is seen by the global eval when self is defined as a local in the containing function...

    that aside, don't use "self" as a var name; it's a pre-defined global, THE global in fact, and using it differently makes code harder to read and grasp at a glance, since it looks like you are working with the global namespace instead of just some var somewhere...
    Last edited by rnd me; 06-06-2013 at 07:28 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    I think it works, excepting for the ugly use of self.

    After all, selfObject is, despite the misleading name, just a string which is the name of the global variable. As in his example:
    Code:
    var b = new Bullet(1, 'b');
    So, to use an example, after that call the line for the setTimeout becomes
    Code:
       setTimeout('b' + '.move(' + top + ')', 100);
    which of course becomes just something like
    Code:
        setTimeout( 'b.move(40)', 100 );
    And, since b is global variable, it should work.

    But *MAN* is it ugly!!!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by Old Pedant View Post
    I think it works, excepting for the ugly use of self
    good eye. "top" is another reserved word, but whatever, let's make it better:

    Code:
    function Bullet(ID) {
      this.ID = ID;
      var that=this;
    
      this.load = function() {
        var left = Math.floor((Math.random()*100)+1);
        this.bullet = document.createElement("div");
        this.bullet.setAttribute("class", "bullet");
        this.bullet.setAttribute("ID", "B"+this.ID);
        this.bullet.setAttribute("style", 'left:'+left+'%');
    
        document.body.appendChild(this.bullet);
      };
    
      this.move = function() {
        var pos = 0;
        function next(){
            if(pos++ < 75) {
              that.bullet.style.marginTop = pos+'%';
              setTimeout( next, 100);
            }
        }//end next()
        next();
       };//end move()
    
    }//end Bullet()
    
    
    var b = new Bullet(1);
    b.load();
    b.move();
    
    var c = new Bullet(1);
    c.load();
    c.move();
    Last edited by rnd me; 06-06-2013 at 10:09 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    niralsoni (06-07-2013)

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Excepting that it needs to be
    Code:
    var c = new Bullet(2);
    else you end up with multiple <div>s with the same ID.

    Since the ID is never actually used (so why set it?) it probably doesn't matter, but...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    p.s.: Tested that code, and not surprisingly it works.

    Here's a fun one though: You can do
    Code:
    var x = new Bullet("framitz");
    x.load();
    x.move();
    x = new Bullet("shuffle");
    x.load();
    x.move();
    x = new Bullet("zamboni");
    x.load();
    x.move();
    and have 3 bullets moving at the same time, all referred to by the same variable.

    Of course, if you then did alert(x.ID) you would only see "zamboni". The other two objects are floating out in space.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts
    Thanks for the help guys.

    What I've ended up with is this which seems to work nicely, my script doesn't lag as much as I was using the jQuery animate.

    Code:
    function Bullet(ID) {
        this.ID = ID;
        this.bullet;
        this.left;
    	var that = this;
        this.load = function() {
    	var minLeft = 100;
    	var maxLeft = 98;
    
    	if (left > 20)
    	{
    		minLeft = left-20;
    	}
    	if (left < 78)
    	{
    		maxLeft = left+20;
    	}
            this.left = Math.floor((Math.random() * (minLeft - maxLeft + 1)) + (maxLeft));
            var Div = document.createElement("div");
            Div.setAttribute("class", "bullet");
            Div.setAttribute("ID", "B"+this.ID);
            Div.setAttribute("style", 'left:'+this.left+'%');
            
            document.body.appendChild(Div);
            
            this.bullet = document.getElementById('B'+this.ID);
        };
        
        this.move = function() {
           var ID = this.ID;
            var top = 0;
            var Thisleft = this.left;
            var bullet1 = this.bullet;
                var pos = 0;
        function next(){
            if(pos++ < 75) {
              that.bullet.style.top = screenHeight*(pos/100)+'px';
              setTimeout( next, 50);
            }
    	else
    	{
    		
                	if (gameStarted)
                	{
    			if (Thisleft < left+3 && Thisleft > left-3) {
                    	gameStarted = false;
                    	clearTimeout(timeout);
    			clearTimeout(counterTimeout);
                    	var col_wrapper = document.querySelectorAll(".bullet")
    
    			var elementsToRemove = [];
    			for (var i = 0; i < col_wrapper.length; i++) {
            			elementsToRemove.push(col_wrapper[i]);
        
    			}
    			for(var i = 0; i < elementsToRemove.length; i++) {
    			   	elementsToRemove[i].parentNode.removeChild(elementsToRemove[i]);
    			}
    			
    			alert("You were hit! You lasted for "+lasted+" seconds");
    
                    	element = document.querySelector(".snake");
                    	element.parentNode.removeChild(element);
                		}
    			else
    			{
                    		element = document.getElementById("B"+ID);
                    		element.parentNode.removeChild(element);
                    		delete bullets[this.ID];
    			}	
                	}
           
    	}
        }//end next()
        if (gameStarted)
        {
            next();
        }
            
        };
    };
    Last edited by tomharto; 06-07-2013 at 08:31 AM.


  •  

    Posting Permissions

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