Using html5 and javascript, since it's single threaded, I'm getting some bottlenecks and trying to make things more efficient and hopefully smoother.

Searching the web there are plenty of examples of HOW to do various things but no mention of whats MORE efficient for various uses.

Question 1:

Which of these is more taxing:
Code:
setInterval(myfunction, 250);
Or:
Code:
//global variable
var frameCount = 0;

//update() called every 25ms elsewhere
function update() {
frameCount++
if (frameCount > 9) {
myfunction();
frameCount = 0;
}
}
Is setInterval() more efficient than an if(count){} condition???

Question #2:
Is it good (performance wise) to wrap toggle conditions (global variables) around blocks of if else statements that are related?
Code:
if(mycondition < 0){dead();}
else if(mycondition >0 && mycondition < 25){doSomething();}
else if(mycondition > 24 && mycondition < 51){somethingdiff();}
becomes....
Code:
if(alive==true){
if(mycondition < 0){dead();}
else if(mycondition >0 && mycondition < 25){doSomething();}
else if(mycondition > 24 && mycondition < 51){somethingdiff();}
}
function dead() {alive = false;respawn();}
function respawn() {alive=true;reset();}
function reset(){ code to reset  };
I do that a lot but don't know if it's a good idea or not, passing a lot of variables around to various functions, like, if (cando==true) {do lots of blocks of code} if (hasCertainItem==true){do half dozen if else statements}


Question #3:

var myInterval = setInterval(stats, 200);

function gameOver() {
clearInterval(myInterval);
clearInterval(mainGameLoop);
}
Is that better than:

var count = 0;

function stats() {
count++;
if (count > 9){count=0; adjustStatsCode;}
}
gameOver(){count=0; clearInterval(mainGameLoop);}
Question #4:

I have the following intervals:
Code:
// Let's play this game!
reset();
var then = Date.now();
var refreshIntervalId = setInterval(main, 20);

setInterval(setStyle, 4900); //adjust progress bar
setInterval(setLifeStyle, 1200); //adjust progress bar

setInterval(setStamina, 900); //adjust progress bar
setInterval(setMana, 950);  //adjust the div on screen
setInterval(playerHealth, 800);  //adjust the div on screen

var stamInt = setInterval(stats, 1000);  //increment stats as time goes on
var attack = setInterval(getPlayer, 250);
So both inside and outside the canvas I have bars that adjust, monsters have one, the player has one, then outside the game canvas I have divs which update at the intervals above...

I consolidated several others I had into the ones above but don't see how to consolidate more....dunno what optimization to do there......

Question #4:

I have a function that sets key listeners, then when a key is detected it triggers a function to adjust the player.x, player.y by += or -= a positive or negative x, y, with a nested condition inside that function to translate the background.

Code:
if (38 in keysDown && hero.y > -80) { 	//------------------------ Player holding UP
 	hero.y -= hero.speed * modifier;	
	ctx.translate(0,2);
	count++;
		if(count > 5) {
		srcY=224;
		srcX+=32;
		count=0;
			if(srcX > 64){srcX=0;}
		}

	}
else if (40 in keysDown && hero.y < HEIGHT-300) { 	//----------------------- Player holding DOWN
	hero.y += hero.speed * modifier;
		count++;
		if(count > 5) {
		srcY=128;
		srcX+=32;
		count=0;
		if(srcX > 64){srcX=0;}
	}
		if(hero.y < HEIGHT){
		ctx.translate(0, -2);
}
	 }
else if (37 in keysDown && hero.x > 0+5) { 	//--------- Player holding LEFT
	hero.x -= hero.speed * modifier;
	count++;
		if(count > 5) {
		srcY=160;
		srcX+=32;
		count=0;
		if(srcX > 64){srcX=0;}
		}
	if(hero.x > 150){
		ctx.translate(2, 0);
 	}
 }
else if (39 in keysDown && hero.x < WIDTH -150) { 	//- Player holding RIGHT
	hero.x += hero.speed * modifier;
	count++;
		if(count > 5) {
		srcY=192;
		srcX+=32;
		count=0;
		if(srcX > 64){srcX=0;}
	}
		if(hero.x < WIDTH){	ctx.translate(-2, 0);}
}
It looks pretty crazy but it's really basic, the srcX and srcY are just positions of my sprite sheet to move when the key is down.

As you can see each key press has 3 more if statements nested, one triggers the sprite to shift every 6th game frame. Another checks to see if the sprite has shifted beyond it's last frame which resets it back to 0.

THEN the third nested if condition shifts the background in the direction the player is walking until it gets to the edge of the screen.

The problem is when I hit a bottleneck and the game freezes for a second, the player shifts in relation to the canvas and walking to the edge of the canvas, the player is out of sight OR the canvas has shifted and you can't get to the edge of it....is there a better way to tie the players position to the map so it doesn't shift unless the map shifts?

Anyone see any patterns from what I've posted with any thoughts on preventing bottle necks?

I just don't know if I should add more toggle counters so I only run things every 20-30 frames instead of every frame vs. using setIntervals...