views:

42

answers:

2

If you click the body of the html once and wait until the ball is offscreen its fine. However if you clicked 2+ times you'll notice the ball moving faster. When you click the body again to make the ball come back it is still faster then it should be. Why? http://jsfiddle.net/44nwt/10/

-edit- in firefox on my page (i havent tried on jsfiddle) i notice the move func is called repeatably even after the ball has left screen and been removed. Why isnt it existing?

+1  A: 
if (left > parseInt($('.ballwrapper').css('width'))) {
    //alert('removed');
    $('.ball').remove();
    return;
}

If left is undefined (i.e., the ball has been already removed) then the condition is false and the scheduling will be done repeatedly

glebm
+1  A: 

This works (http://jsfiddle.net/44nwt/11/)

there were two issues:

#1 every click creates another instance of ball and ballwrapper, and adds them into the body. It's only necessary to create the instance if it doesn't already exist. So that would look something like this:

 $('body').click(function() {
    var wrapper = $('.ballwrapper');
    if( wrapper.length == 0 ) {
        $('body').append('<div class="ballwrapper"><img class="ball" src="http://michaelreid.typepad.com/.a/6a00e54edabd838833011168a00f09970c-800wi"/&gt;&lt;/div&gt;');
    }
    MoveCode();
});

#2 You need a gate at the beginning of your MoveCode function, to prevent the "extra" cycles (the ones that get started by each extra click) from proceeding once the ball/ballwrapper has been removed.

function MoveCode() {
    var wrapper = $('.ballwrapper');
    if( wrapper.length == 0 ) return;

    var l = $('.ball').css("left");
    var left = parseInt(l);
    if (left > parseInt(wrapper.css('width'))) {
        //alert('removed');
        wrapper.remove();
        return;
    }

    $('.ball').css("left", (left + 60) + "px");
    setTimeout(MoveCode, 160);
}

Also note... I changed it to remove the ballwrapper, rather than removing just the ball. Otherwise, if you run it all the way through over and over again, you'll accumulate old, unused ballwrappers in the background.

Lee
Excellent. I kind of figured the problem was because i tried to spawn multiple (not properly but i didnt care, just wondering about the effect) but didnt understand why when one disappeared the other wouldnt start moving and remove itself (i assume it moves the first found). I guess when i fixed the problem knowing the issue doesnt help
acidzombie24
Actually, you weren't seeing separate movement because `MoveCode()` was acting on *all* instances of `.ball` at once. jQuery selectors (`$('.ball')`), always produce a *collection* containing all the elements that matched the selector (not necessarily just one). When the collection contains multiple items, most of the property *getters* (`.css('left')`) will just fetch the requested value from *the first item*. While property *setters* (`.css('left', '60px')`) will set the value to *all* elements in the list. [an example to illustrate](http://jsfiddle.net/km26j/)
Lee