fighting with setInterval

Hello,

This is my first post here, so I ask in advanced that you please be gentle and excuse my ignorance if I inadvertently trample on any of the posting etiquette policies (both written and unwritten), and please let me know if/when I do screw up, so that I'll know to not do that again.

I thank you in advanced for your graciousness, and now I'll proceed with my issue.

The subject basically say it all: I'm fighting with setInterval. In this post, I'm including 2 iterations of the same code: 1) a bare-bones version (the working code), and 2) a version closer to what I'd like to use in production (although it's still pretty far from production-grade code IMHO).

My goal was (and still is) to partition the code into 3 parts: 1) the initialization code (initHex(...) and fade(...)), 2) the display/canvas handling code (setBgColor(...) and doIt(...) in this case), and 3) the timer code. The reason for the increasing complexity is that I ultimately intend to set up a graphics pipeline for rendering various objects.

The problem, that I'd like to resolve, feels like I'm dealing with some kind of scope issue. The setInterval(...) call in the first code fragment works correctly, but the call in the second code fragment appears to go into while(1) (or do-forever) loop. (I've tested this with several versions of Firefox [most recently with version 3.0.5] and Konqueror [most recently version 3.5.10] using several Unix-like envs [Linux {Knoppix 5.3.1, Slax 6.0.9, DSL, Gentoo}, OSX {Tiger and Leopard}, and BSD {FreeBSD 7.x, and OpenBSD}]; I consistently received the same results.) Also, upon closer inspection (of the second version)--both using document.write(...) calls and FireBug--I noticed h_i always remained 0 whenever the setInterval(...) code ran.

So, how do I resolve this/these issues?

NOTE: Occasionally, I needed to use \[i\] in both code fragments to prevent the forum parser from treating my indexes as style codes. Please let me know if there's another way to do this (without my needing to rename the index variable, i).

The working code:

<HTML>
 <HEAD>
 <TITLE>Fader</TITLE>
 <SCRIPT LANGUAGE="Javascript">
 var hex=new Array('#000000', '#1f1f1f', '#3f3f3f', '#5f5f5f', '#7f7f7f', '#9f9f9f', '#bfbfbf', '#dfdfdf', '#ffffff'), i=0, intervalId; function fadeIn() {
 document.body.style.backgroundColor = hex\[i\];
 ++i;
 if (i>=hex.length) clearInterval(intervalId);
 } // 50 ms is good
 [b]intervalId = setInterval('fadeIn();', 50);[/b]
 </SCRIPT>
 </HEAD>
 <BODY></BODY>
</HTML>

The code with the setInterval issues:

<HTML>
 <HEAD>
 <TITLE>Fade In And Out</TITLE>
 <SCRIPT LANGUAGE="Javascript">
 // dithered hex patterns array
 var hex=new Array(), [b]h_i=0[/b], h_ub, myInt, n=8 function initHex(a, b) {
 for(var i=0; i<n; i++) {
 var tmp=b*(n-i)/n+a*i/n-1, j=Math.floor(tmp/16), k=tmp%16
 hex\[i\]=j.toString(16)+k.toString(16)
 }
 hex[n]="00"
 // assert hex.length is proper value (n+1)
 if(hex.length!=(n+1)) document.write('initHex: ERROR: Recheck the bounds i and n.')
 } // end of initHex
 function setBgColor(i) {
 // reinterpret i (a color palette value) as a 3-digit, packed, base rdx (the number of elements in hex) value;
 // and split off each digit as a separate index
 var rdx=hex.length, j=Math.floor(i/Math.pow(rdx,2)), k=Math.floor((i%Math.pow(rdx,2))/rdx), l=i%rdx
 // transform those indexes into the corresponding RGB-value
 x='#'+hex[j]+hex[k]+hex[l]
 document.body.style.backgroundColor=x
 document.write('i: '+i+' backgroundColor: '+x+'<BR>')
 } // end of setBgColor
 function doIt() { setBgColor([b]h_i++[/b]); if (h_i>=h_ub) { h_i=0; clearInterval(myInt); } }
 function fade() {
 document.open('text/html')
 initHex(0, 0x100)
 h_ub=Math.pow(hex.length,3)
 // NOTE: I keep getting 'document.body is null' errors in FF 3.0.5 unless
 // I first write something, before calling setBgColor(...).
 document.write('<BR>')
// [b]myInt=setInterval('doIt();', 50)[/b]
//setBgColor(400) // 400 <--> #7f007f
 } // end of fade fade()
[b]myInt=setInterval('doIt();', 50)[/b]
 </SCRIPT>
 </HEAD>
 <BODY></BODY>
</HTML>

Also, I'd like to know why I kept getting 'document.body is null' errors in FireFox 3.0.5 whenever I attempted to change the background color--unless I wrote something (which could be anything other than ' ' or '\t') to the document stream beforehand.

function echo(s) { return [b]document.getElementById("response").appendChild(document.createElement("div")).appendChild(document.createTextNode(s));[/b] } </script> </head> <body> <div id="[b]response[/b]"></div>

fighting with setInterval

setInterval appears to modify its scope in a surprising manner

r3dlp

daveVk

r3dlp

daveVk

r3dlp

r3dlp

Fotiman

daveVk

r3dlp

daveVk

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week