Develop Reference

Can't get clearInterval to work, despite several approaches

I have the following javascript:
var i = 0;
var intervalCounter = setInterval(function(){
[... CODE HERE ...]
if (i >= (arrayLength - 1)) {
clearInterval(intervalCounter);
}
else {
i++;
}
}, 200);
But, (you've guessed it), clearInterval(intervalCounter); doesn't clear the interval.
I could understand this, if the if condition were
if (i === (arrayLength - 1))
but how can the javascript engine repeatedly miss that i is greater than (arrayLength-1)?

The following code works correctly, displaying 0 through 9 on the console:
var a = Array (10),
i = 0,
intervalCounter = setInterval(function(){
console.log (i);
if (i >= (a.length - 1)) {
clearInterval(intervalCounter);
}
else {
i++;
}
}, 200);
Your problem must be with the value of i or arrayLength, try displaying those variables at each iteration

It turns out the answer lay elsewhere, further down the script - I'll include it for the sake of completeness.
From various tests, it looked like the error had something to do with speed of script execution. The script controls a fast animation which occurs on page load, so I changed the event listener from
window.addEventListener('load',activateAnimation,false);
to
window.addEventListener('DOMContentLoaded',activateAnimation,false);
That enabled the animation to start sooner - and for more of the animation to work before it failed - but it didn't fix the problem - the setInterval was still running and hitting blanks infinitely after a certain number of runs.
Then it occurred to me that because the animation is taking place within a live nodelist... maybe the next part of the script (which removes elements from that nodelist) was starting too soon, leaving the setInterval still trying to work on nodelist elements that were no longer present in the document.
My solution was to increase the setTimeOut to create a bigger delay before the next part of the script commenced, but also to add an additional clearInterval as the top line of the script running within the setInterval:
if ((i + 1) > elements.length) {clearInterval(enterHashtag);}
That way, not only would the setInterval clear itself if the counter reached the end of the nodelist's initial length, but it would also clear itself if the next part of the script had just removed from the nodelist the element the setInterval was about to go to work on.

Pacman game - Making a wall block his movement

I'm making a pacman game with Jquery. Pacman's movement is directed by the arrow keys, which triggers a setInterval() that makes him move his width's distance repeatedly, giving the illusion that he is moving Completely straight. Pressing a new key clears the interval and starts him moving somewhere else.
function Player(){
this.left = $('#pacMan').css('left');
/**/
this.top = $('#pacMan').css('top');
/**/
this.rightMove = function(){
if (){
this.left = parseInt(this.left) + 20;
$('#pacMan').animate({'left': this.left}, 100);
}
};
//The object containing the movement method. The empty if statement is the problem I'll get to later.
var timer;
$('body').keydown(function () {
var key = event.which;
window.clearInterval(timer);
timer = window.setInterval(function() {
switch (key) {
case 37:
pacMan.leftMove();
break;
// The keydown function. It's all kind of disjointed, I know.
So the above works fine. My issue however is this: What happens if I put a wall? How would I get him to stop? I am able to do it with one block but not many. Let me explain.
So I have the whole thing laid out on a grid that's the width of pacman. Me appending a div child to one of the grids selects the grid boxes next to it and puts it in an array. My original if statement was that if Pacman's position is shared with the position of the neighboring grid's, one of his movements are disabled.So if he is just left of the block he can't move right, giving the illusion that the block is stopping him from moving.
e.g
If(Pacman.position().left !== gridBox120.position.left(){
pacMan.moveRight()
}
else{
clearInterval()
}
//As long as pacman is not in the spot right next to the block, he can move right.
This works. But what if I want multiple blocks on the stage? How could I get all these things blocks in the if statement? Or would that be the best way to do it?
My plan was to put the neighbouring divs ID in an array and if Pacman's position shares the position of any of the ID's of the items in the array, he can't move right.
I have no idea how to do this. Some sort of iteration? Or maybe an array is not the best idea for this?
If this is not explained properly I'll respond to comments.
Image link. yellow is pacman. purple are the neighbor divs that are sent to arrays

i already did something like this for a brick breaker.
I've tested obj and array for storing blocks. Array is far faster than obj.
My method was : store all the grid in arrays
And verify after each move the left-1, left+1, top-1 and top+1
if (grid[left-1][top] == "block" && move == "left") {
Pacman.stopFunction()
}

Go through a sprite and save background-position

In the game that I have, when the player walks up to the number and presses the "m" key one frame of the sprite is skipped.
To clarify, the following is my code that I use to keep track of when the frames should change by storing the position of the frames in a variable:
function animateStar() {
var pos = 0;
$(document).keyup(function(e) {
if (e.keyCode == 77) {
pos -= 32;
$('#n1').css('background-position', pos+'px -0px');
}
});
}
So as you can see, everytime the key code 77 (representing "m") is pressed, the frames will change, since each of my frames has a height and width of 32px.
However, the problem that I am having is that when my player walks away from the object and comes back to it, instead of continuing from where he left off, the frames sort of skip.
Here is my code: http://jsfiddle.net/j40s8gjt/
Since my sprite sheet is composed of numbers, you should be able to see what's up with the code.
Try setting the frame at a number between 3-5, walking away from the object then coming back to it and pressing m again, you should see that it sort of re loops everything.
A possible solution of this might be to store the current position of the object when the player leaves it, but I am not sure how to go about doing so.
I hope I've been clear enough, thank you!

Since you're defaulting to 0 each time you call animateStar() it starts over.
Grabbing the current position is what you need to do instead of defaulting to 0 each time.
in animateStar(), Change this line:
var pos = 0;
to this:
var pos = $('#n1').css('background-position').split('px ')[0] || 0;
That way it gets the current position when it starts, instead of starting from 0 again and resetting the frame.
Working example: http://jsfiddle.net/j40s8gjt/2/

Javascript animation with recursion, strange behavior

Im trying to do code in javascript a ruzzle solver. For now it just dig through the maze and find every possible path ( in the future I will match them against a dictionary to find the real valid words in it)
You can see it here : http://178.239.177.105/ruzzle/
I wanted to do it with an animation that show how the algorithm works on it, but im issuing a problem.
If you load it, the page just dont show anything, and my browser crash after a while.
BUT...
if you set an alert("") function, somewhere in the middle of the recursion function, you would be able to go through any step in the algorithm.
Especially if you set the browser to prevent to show any further alert messages, you'll finally see the animation working on the maze.
I was actually trying to do this via setInterval(), but is not working.
So I have two questions:
- Why do the script cause the page to crash, or not if there's an alert?
- How can I properly show the animation using some kind on wait() mechanism?
Thanks
You can see all the code by going on the page and look at the source code, however for the sake of clarity I'll paste the relevant code here:
You can also play with the code here : http://jsfiddle.net/Gcw2U/
(you will have to uncomment the last line in the to make it run)
//this matrix of chars rapresent the 4x4 puzzle
var ruzle_model = [["w","a","l","k"],["m","o","o","n"],["h","a","t","e"],["r","o","p","e"]];
// ""offsets" rapresent the four motion vector(up,down,left,right)
// used to visit the matrix
var offsets = [[1,0],[0,1],[-1,0],[0,-1]];
//recursive function to dig the maze
function path(m,i,j,paths,checkeds){
alert("SET BROWSER TO AVOID NEXT ALERTS MSGs!");
//base case, if not hitting a wall or already checked cell
if ( ! (i<=3 && i>=0 && j>=0 && j<=3) || isChecked(checkeds,i,j)){
terminal.innerHTML = terminal.innerHTML + "-"+ paths;
uncheckAllCells();
return paths;
}
//call path for every direction (up,down,left,right) stored in offsets
var tmp = [];
for (var c=0; c<offsets.length;++c){
var offset = offsets[c];
checkCells(i,j);
checkeds.push(new Array(i,j));
tmp.push(path(m,i+offset[0],j+offset[1],paths + m[i][j],copy(checkeds)));
}
return tmp;
}
//call path on every cell in the maze
function ruzzle(r){
var sol = []
for(var i=0; i<4; ++i){
for(var j=0; j<4; ++j){
var checkeds = new Array();
sol.push(path(r,i,j,'',checkeds));
}
}
terminal.innerHTML = sol;
return sol;
}

Javascript loops and recursions inhibit rendering of the page, so any changes made will stay invisible until the script stops executing, like when you spawn an alert. When a user sets "do not show alert messages", the alert still yields execution time to the underlying eventloop, which will update the page.
For as-fast-as-possible (high fps) animations, use requestAnimationFrame().
In your case, setTimeout() is the best way to go. Set a timeout on the recursive call to path.
function recursive(args) {
// do stuff to args
setTimeout(function () {
recursive(args);
}, 5);
}
Example

Multiple simultanous animations, simulation of 'animate' easing and one 'step' call for a jQuery collection

Here is the problem, I've got a tree structure of html blocks, global container is of a fixed width(X) and height(Y). When i click one of the blocks on a level, all other blocks shrink to some size, while the clicked one gets enlarged to the leftover space, and the sublevels show up on it's place.
For all the shrinking i'm using default animate function with easing effect, when shrinking 1 level, to avoid enlargement bugs i have to do something like this:
$tabs.not($obj).animate({height:32<<$obj.getVerUp().length+"px"},{duration:300,
step:function() {
$obj.height(function(){
var sum = 0;
$tabs.not($obj).each(function(){
sum += $(this).height();
});
return $obj.getCont().height()-sum+"px";
});
}
});
$tabs are all the tabs of current level, $obj - is the one tab that i want to enlarge
The main problem is:
When i open up a tab that is on a deep level, i have to animate all the tabs of higher levels to shrink a little bit more, thus the $obj X and Y would change, so the current animation has to use new values, but if i call 3 different animations on different levels i'm bound to get a bug, when one of the animations on a deeper level finishes 1 step earlier, while the one on the level above, would enlarge the object by 5-10 more pixels and that space wouldn't be used up.
The second problem is that there has to be about 50 object animating with easing at the same time, which is a little bit overkill.
And the last problem is when i call step callback on animation as shown above, i have a strange feeling that it calls the step separately for each animation of the $tabs collection, while i need 1 step for all the tabs in the list (to avoid unnecessary scripts)
There might be some other way to fix all that, but i have yet to discover all jQuery functions, so from what i see the only way is to simulate easing, and do everything in one single animation.
I don't really want to use setInterval and determining when do i need to clear it plus calculating each of the easing values, if there is a simple way doing it.
Does jQuery has some sort of empty animation easing, e.g.
$().css("height":starth+"px").animate({height:endh},{duration:300,
step:function(fn) {
// all the animation actions here via fn end value
}
});
Thanks in advance.
What I need - is not a completely working solution in code, just some enlightenment in those subjects:
Is there a legal way to call one step function for a collection of animated elements, or, maybe, it does call step once when I use one .animate on collection.
I'd be really appreciated if someone would shed some light over how does jquery handle multiple .animate, would they be used in one global function that works on .setInterval? or would they be having massive number of those .setIntervals that are equivalent to setTimeout (which most browsers can't handle in large amounts);
Is there a way to simulate 'animate' easing, some function name maybe, or a special trick to achieve that (the only thing I see is a hidden element or 'window' property to change maybe)
Or some directed pushes with functions I should study, that could help me achieve my goals

Guess i pretty much found the answer to my questions:
http://james.padolsey.com/javascript/fun-with-jquerys-animate/
Here's the empty animation from the link above with 1 step function with desired values, going to post the result later on if it all works out.
var from = {property: 0};
var to = {property: 100};
jQuery(from).animate(to, {
duration: 100,
step: function() {
console.log( 'Currently # ' + this.property );
}
});
Yes it all worked great, no desynch, and a good speed, since only 1 animate, found making one universal function for the animation - waste of resourses, so it is pretty specific, but still, here it is:
animate: function($obj) {
var T = this;
...
T.arr = new Array();
// gathering the array
$obj.each(function(i){
var size;
T.arr[i] = {obj:$(this), rest:$(this).getSibl(), cont:$(this).getCont()}
if($(this).hasClass("vert"))
{
size = "height";
T.arr[i].to = yto;
}
else
{
size = "width";
T.arr[i].to = xto;
T.arr[i].children = $(this).getChld();
}
T.arr[i].rest.each(function(){
$(this).attr("from",$(this)[size]());
});
});
// animating prop
jQuery({prop:0}).animate({prop:1}, {
duration: 300,
step: function() {
var i;
var P = this;
var newval;
var sum;
var size;
for(i = 0; i < T.arr.length; i++)
{
size = T.arr[i].obj.hasClass("vert") ? "height":"width";
sum = 0;
T.arr[i].rest.each(function(){
// new value of width/height, determined by the animation percentage
newval = parseInt($(this).attr("from")) + (T.arr[i].to-$(this).attr("from"))*P.prop;
$(this)[size](newval);
sum += newval;
});
T.arr[i].obj[size](T.arr[i].cont[size]()-sum);
}
}
});
},