toString seems to cause setTimeout to not always execute function for variable argument of toString
===

This code's purpose is to change the background of a webpage several times in a loop.

The following implementation doesn't utilize .toString() to set the color of background, instead, explicitly and statically stating the color which the background should be changed to.

    var i=1;
    function changeColor() {
    	var 
    		interval=100, //16.66666666, //60 hertz refresh rate
	    	loops=10
    	;
	
    	setTimeout(function() {$("#page").css({"background":"#000"})}, interval*0);
    	setTimeout(function() {$("#page").css({"background":"#111"})}, interval*1);
    	setTimeout(function() {$("#page").css({"background":"#222"})}, interval*2);
    	setTimeout(function() {$("#page").css({"background":"#333"})}, interval*3);
    	setTimeout(function() {$("#page").css({"background":"#444"})}, interval*4);
    	setTimeout(function() {$("#page").css({"background":"#555"})}, interval*5);
    	setTimeout(function() {$("#page").css({"background":"#666"})}, interval*6);
    	setTimeout(function() {$("#page").css({"background":"#777"})}, interval*7);
    	setTimeout(function() {$("#page").css({"background":"#888"})}, interval*8);
    	setTimeout(function() {$("#page").css({"background":"#999"})}, interval*9);
       	setTimeout(function() {$("#page").css({"background":"#AAA"})}, interval*10);
        setTimeout(function() {$("#page").css({"background":"#BBB"})}, interval*11);
    	setTimeout(function() {$("#page").css({"background":"#CCC"})}, interval*12);
    	setTimeout(function() {$("#page").css({"background":"#DDD"})}, interval*13);
    	setTimeout(function() {$("#page").css({"background":"#EEE"})}, interval*14);
    	setTimeout(function() {$("#page").css({"background":"#FFF"})}, interval*15);
	
    	setTimeout(function() {
    		if (i<loops) {
    			i++;
    			changeColor();
    		} else {
    			$("#page").css({"background":"#FFF"});
    			i=1;
    		}
    	},interval*16);
    }

It seemed very obvious that I should be using a for loop, so I rewrote it as:

    var i=1;
    var color=0x111111;
    function changeColor() {
    	var 
    		interval=100, //16.66666666, //60 hertz refresh rate
    		loops=3
    	;
       	for (j=0;j<15;j++) {
	    	setTimeout(function() {$("#page").css({"background":"#"+color.toString(16)})}, interval*j);
    		color+=0x111111;
    	}
    	color=0x111111;
    	setTimeout(function() {
    		if (i<loops) {
    			i++;
    			changeColor();
    		} else {
    			$("#page").css({"background":"#FFF"});
    			i=1;
    		}
    	},interval*j);
    }

However, the background color only changes once using this code.