Page 1 of 1
weird javascript behavior?
PostPosted: Sat Dec 06, 2008 12:58 pm
by Mithrandir
Hey guys!
I'm trying to build a simple javascript-based hiragana flashcard program. I have the code working almost totally right, but I'm having one little glitch. The page refuses to re-draw in between when it shows the values. There's an HTML page and a javascript page. Here's the code attached. Does anyone know of a simple work-around to make this function, or maybe a better "sleep" function for me? The "waittime" there is in miliseconds.
Thanks!
- Mith
PS: see it in action at
http://flash.holdmeaccountable.org/flash.js:
- Code: Select all
function sleep(delay)
{
var start = new Date().getTime();
while (new Date().getTime() < start + delay);
}
function updateL1(newChar)
{
document.getElementById('lang1').innerHTML = newChar + '';
}
function updateL2(newChar)
{
document.getElementById('lang2').innerHTML = newChar + '';
}
function mainroutine()
{
var myLang1 = [ 'あ', 'い', 'う', 'え', 'お'];
var myLang2 = [ 'a', 'i', 'u', 'e', 'o'];
var waitTime=500;
for (myCounter = 0; myCounter < 5; myCounter++)
{
updateL1(myLang1[myCounter]);
updateL2(myLang2[myCounter]);
sleep(waitTime);
}
}
and index.html:
- Code: Select all
<html>
<head>
<link rel="stylesheet" href="flash.css" />
<script type="text/javascript" src="flash.js"></script>
<title>Flashcards at holdmeaccountable.org</title>
</head>
<body onload="mainroutine();">
<div class="flashheader">
Flashcards at holdmeaccountable.org
</div>
<div class="myspacer"> </div>
[align=center]
<p class="lang1" id="lang1">-</div>
<p class="lang2" id="lang2">-</div>
[/align]
</body>
</html>
PostPosted: Sat Dec 06, 2008 3:49 pm
by Midori
Okay, the problem is that your sleep function does in fact sleep, but since it does so by grinding over that while loop it always uses 100% CPU while it is sleeping (not a very restful kind of sleep
). Because the sleep function uses all the CPU, the browser doesn't have time to display anything until it is done "sleeping", and then you see the last card.
You'll have to use setTimeout or setInterval. To do that you have to roll your for loop into a function and have it setTimeout on itself at the end:
- Code: Select all
function mainLoop(myCounter)
{
updateL1(myLang1[myCounter]);
updateL2(myLang2[myCounter]);
if (++myCounter <= 5) setTimeout('mainLoop('+myCounter+')', waitTime)
}
You can also use setInterval, which automatically repeats the function at the given interval, but then you have to detect when you're done somehow and clearInterval the ID returned by setInterval.
PostPosted: Sat Dec 06, 2008 4:20 pm
by ShiroiHikari
Um...the flashcards don't do anything? All I see is a page that has the hiragana and romaji for "o". XD
PostPosted: Sat Dec 06, 2008 6:31 pm
by Mithrandir
AHAH! Good catch, man! I've updated the mainLoop to reflect this, and added a bit of code to jump back and forth between the two arrays. Check it out, now.
WOOT!
That's the basis for the code I'm looking at expanding on for a pretty cool self-paced flash card learning setup.
EDIT: I've got a first draft of the whole hiragana chart (as much as I felt worth doing, anyway) up now. I'll leave that up and play around with it some more. Next steps - multiple "lessons," variable timing, randomization, and saved preferences.
PostPosted: Sat Dec 06, 2008 8:54 pm
by Tsukuyomi
I see the romanji changing, but I only see a square for the actual character ^ ^;
Once I think of it.. I think I did leave off at Hiragana with my Japanese lessons ^__^;
PostPosted: Sat Dec 06, 2008 8:56 pm
by Mithrandir
Are you able to see this:
はじめまして！
or does it look like boxes? You may need to install an appropriate IME.
PostPosted: Sat Dec 06, 2008 9:25 pm
by Tsukuyomi
[quote="Mithrandir (post: 1274283)"]Are you able to see this:
は]
On HoldMeAccountable, I see a square, and on here, I see tally looking marks ^__^;
Once I think of it.. I did forget to change the language setting thingy :-?
PostPosted: Sat Dec 06, 2008 10:02 pm
by Mithrandir
PostPosted: Sat Dec 06, 2008 10:19 pm
by Midori
To tell you the truth, I don't like javascript very much. I wish there were a better language I could use for web programming.
PostPosted: Sat Dec 06, 2008 10:51 pm
by Mithrandir
Hmm... Web programming languages. I suppose PHP is out of the question.
I suppose you *could* use perl... If only you had someone you could talk to who knew something about it.
Honestly, though, yeah... There really hasn't been nearly enough innovation in the browser-executed language space. Considering the explosion of the web recently, I can't for the life of me understand why!
PostPosted: Sun Dec 07, 2008 2:02 pm
by Midori
Flash and Java are powerful, but they're confined to applets (and flash is really slooow). I think Google is trying to bring a few more browser-run tools onto its Chrome browser, but it's pretty exclusive. There are some wicked cool things you can do with CSS alone, but only if your browser is standards-compliant to standards that aren't standards yet...
I heard that the Parrot folks got a grant from the Mozilla Foundation a while ago. I hope that means something cool! (like browser-executed Perl 6
)
PostPosted: Sun Dec 07, 2008 2:11 pm
by Mithrandir
Midori (post: 1274492) wrote:(like browser-executed Perl 6
)
I would chip in a couple of bucks to see this.
Though there may be some security ramifications down the line.
PostPosted: Sun Dec 07, 2008 4:00 pm
by Midori
I'd imagine they could keep it pretty safe. In fact, I'm pretty sure somebody wrote a module somewhere that modified Perl 5 to be remote-execution-safe by disabling all the dangerous opcodes during compilation. Parrot could be similarly augmented. Then you just have to create an special interface for cookies and stuff. Maybe it's a pipe dream for now, but it doesn't sound too hard to me. Of course, there's no way IE would ever support it...