JavaScript - Settimeout Multiple Not Working
I have tried the following code on FF and Safari on OSX 10.6.3 , and FF stop at after print out "step 2", whereas Safari did not print out "step 2" after the setTimeout("step2();",10000);
Did I do something wrong ? Appreciate any advise. Code: <html> <p><b> SetTimeout Testing </b> <script language="JavaScript"> <!-- Begin document.write("step 1"); function step3() { document.write("step 3"); } function step2() { document.write("step 2"); setTimeout("step3();",10000); } setTimeout("step2();",10000); // End --> </script> </html> Similar TutorialsSo I have a very simple block of code: Code: function successfulReg() { alert(1); // $.colorbox({ html: '<p>Registration successful!</p>' }); } if ($('#regSuc').size()) setTimeout('successfulReg', 1000); If the regSuc item exists (1 second after the page loads), I want to bring up a lightbox. As I couldn't get this to work, I tried to get an alert to show up. This did not work either. I changed the setTimeout to Code: if ($('#regSuc').size()) setTimeout('alert(1), 1000); Which did work. And I tried successfulReg and succesfulReg(), neither of which worked. Am I missing some basic element to getting a timeout to work? [CODE] function slide(dir, i) { //getW() gets the width of the window //i is initally set to 0 var w = getW(); if(i < w) { document.getElementById('page').style.left = (document.getElementById('page').offsetLeft - 1)+"px"; i++; setTimeout("slide("+dir+", "+i+")", 100); } } [/ CODE] the function executes from it's initial calling but never calls itself back up I have a code snippet here. Everything in it works as expected. However the setTimeout does not seems to be working. It should be an infinite loops updating the contents of the table every 5 sec. However the table shows once when first called and the setTimeout never seems to kick in. Any help in getting that loop to work would be greatly appreciated. Code: statTick : function (){ var t = Tabs.Train; var m = '<TABLE class=pbTabPad>'; clearTimeout (t.statTimer); for (var c=0; c<Seed.s.cities.length; c++){ var last = serverTime(); var trains = []; m += '<TR><TD>City #'+ (c+1) +' '; for (var t=0; t<Seed.s.cities[c].jobs.length; t++){ if (Seed.s.cities[c].jobs[t].queue=='units' && Seed.s.cities[c].jobs[t].unit_type) trains.push (Seed.s.cities[c].jobs[t]); } if (trains.length == 0) m += 'idle</TD></TR>'; else { for (var j=0; j<trains.length; j++){ var left='', tot=''; if (j==0) left = 'Training '; else if (j==trains.length-1) tot = '   <B>('+ timestrShort(trains[j].run_at-serverTime()) +')</b>'; m += left + trains[j].quantity +' '+ trains[j].unit_type + ' '+ timestr(trains[j].run_at-last, true) + tot +'</TD></TR>'; last = trains[j].run_at; } } } document.getElementById('pbtrnTrnStat').innerHTML = m +'</table>'; t.statTimer = setTimeout (t.statTick, 5000); }, This one has me stumped, it seems that no matter what i do the indicator needle in this web app just won't move. The odd thing is, i'm able to verify that the function for the setTimeout is being called, but when i try to write some data to the TextArea, or even do a simple alert, ...that data is not written, nor is an alertbox activated. ...just for those wondering, this is a JavaScript implementation of the Micro Pk test (bell curve - obviously) from the RetroPk experiments website. Code: <html> <head> <script type="text/javascript"> var Status = "Start"; //calculate the Z-score var Direction = "Left"; var Sound = 0; var Zero = 0; //Reset the 1s and 0s Sum variables var One = 0; var RngNumbers = 10; //Number of Random Numbers to generate var zScore; var IndicatorPos; var Stop = 0; function Start() { alert("starting"); while (Stop != 0) { IndicatorPos = parseInt(document.getElementById("Indicator").style.left); var tick = setTimeout(CheckRNG(), 1000); } } function CheckRNG() { document.getElementById("debug").value = "starting loop" + "\n"; for (var zCounter = 1; zCounter <= RngNumbers; zCounter++) //Generate a series of random numbers and Add the number of 1s and 0s { var RngNumber = Math.round(Math.random() * 1); if (RngNumber == 1) //Count the number of 0s { Zero = Zero + 1; } else { One = One + 1; //Count the number of 1s } } var OldScore = zScore; var Mean = RngNumbers * (1 / 2); //Calculate the statistical mean of the Random number sum var StandardDeviation = Math.sqrt(Mean / 2); //Calculate the standard deviation of the RNG stream alert("hi"); document.getElementById("debug").value = StandardDeviation; if (Direction == "Left") //If the direction for Hits is "Left" then calculate z-score for 1's { zScore = (One - Mean) / StandardDeviation; } if (Direction == "Right") //If the direction for Hits is "Right" then calculate z-score for 0's { zScore = (Zero - Mean) / StandardDeviation; } //Swap the previous and current z-score variables if (zScore > OldScore) { document.getElementById("Indicator").style.left = IndicatorPos + 1 + "px"; if (Sound == 1) { //playwave SoundFile$, async //If the sound is turned on, and there is forward progress } //play the default indication sound } if (zScore < OldScore) { document.getElementById("Indicator").style.left = IndicatorPos - 1 + "px"; if (Sound == 1) { //playwave SoundFile$, async //If the sound is turned on, and there is forward progress } //play the default indication sound } } </script> </head> <body> <div style="position: absolute; top: 0px; left: 0px"> <img id="BGimage" src="BellCurve.png" style="position: relative; top: 0px; left: 0px;"> <div id="Indicator" style="background: red; position: absolute; top: 0px; left: 393px; width: 1px; height: 302px;"></div> </div> <div style="position: relative;"> <input type="button" value="Start" onClick="Start();"> <input type="button" value="Stop" onClick="javascript:Stop++;"> </div> <textarea id="debug" cols=10 rows=10 style="position: relative;"></textarea> </body> </html> I am trying to build a 2-column table with a slidedown effect in each cell: http://www.inroadsracing.com/team5.html Thought I would be clever and copy the first cell into the others and change the content. If you click on 'continue,' you will see the issue I am trying to solve. Is the cause a float issue? Div? Something else? Thanks, -Bo Hello, I am new to javascript and have managed to create the below form with few fields validation that is working. I also have an email format validation function which is not working. Any help would be hightly appreciated. Below with the form with the javascript <html> <script language="JavaScript" type="text/javascript"> <!-- var radio_selection=""; function checkform ( form ) { **// ** START ** **if (form.name.value == "") { ****alert( "Please enter your name." ); ****form.name.focus(); ****return false; **} if (form.Phone.value == "") { ****alert( "Please enter your phone number." ); ****form.Phone.focus(); ****return false; **} **if (form.email.value == "") { ****alert( "Please enter your email." ); ****form.email.focus(); ****return false; } if (radio_selection=="") { alert("Please indicate your attendance."); return false; } *// ** END ** **return true; } function checkEmail(form) { if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value)) { return true; } alert("Invalid E-mail Address! Please re-enter."); return false; } //--> </script> <body> <form style="font-family:lucida calligraphy;font-size:120%;color:maroon" action="invitees.php" method="post" onsubmit="return checkform(this);checkEmail(this.email.value);"> <table cellspacing="5" cellpadding="5" border="0"> <tr> <td valign="top" > <style="font-family:lucida calligraphy;font-size:100%;color:maroon">Name: </td> <td valign="top"> <input type="text" name="name" id="name" size="40" value="" /> </td> </tr> <tr> <td valign="top"> Phone Number </td> <td valign="top"> <input type="text" name="Phone" id="Phone" size="40" value="" /> </td> </tr> <tr> <td valign="top"> Email Address: </td> <td valign="top"> <input type="text" name="email" id="email" size="40" value="" /> </td> </tr> <tr> <td valign="top"> Will You Attend </td> <td valign="top"> <input type="radio" name="Attendance" id="Attendance_0" value="Yes" onClick="radio_selection='yes'" /> Yes <input type="radio" name="Attendance" id="Attendance_1" value="No" onClick="radio_selection='no'"/> No <input type="radio" name="Attendance" id="Attendance_2" value="Maybe" onClick="radio_selection='maybe'"/> Maybe<br/> </td> </tr> <tr> <td valign="top"> Adults <select name ="adults" id="Adults" > <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> </td> <td valign="top"> Kids <select name="kids" id="Kids" > <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> </td> </tr> <tr> <td valign="top"> Post a Note </td> <td valign="top"> <textarea name="Note" id="Note" rows="6" cols="35"></textarea> </td> </tr> <tr> <td colspan="3" align="center"> <input type="submit" value=" Submit Form " /> </td> </tr> </table> </form> </html></body> I made a php page with multiple forms with javascript code in it. The javascript makes an input field for the date. The problem is that the script interfers between other scripts in the other forms and i get wrong orderdate. Code: <form action='dataadd.php' name='$id'>"; $datestime=time(); echo "<input type=hidden name=dateid value='$id'>"; echo "<input type=hidden name=datestime value='$datestime'>";?> <script type="text/javascript"> DateInput('orderdate', true, 'yyyy-mm-dd')</script>.... Hi, I have long polling functionality working with Google Desktop Notifications. http://blog.perplexedlabs.com/2009/0...-long-polling/ However if I have multiple tabs open then the Notification received from the server is duplicated on every tab. Is there way to prevent this from happening as it should only appear once? Thanks So, I'm using a lot of js and I needed to find a work around to get it all working together, so I'm using InsertContent and RemoveContent to control several divs that I have. In this case it is 4 divs, but in other situations I'll have up to 10. My problem is that when the user starts with the first div displayed, the other 3 swap just fine, however, when clicking through the set of links, once the user gets to the 3rd link that is supposed to swap out the divs all the divs show up except the first, and the same happens on the fourth link. This is my js for the div swap functionality: Code: <script type="text/javascript"> <!-- function InsertContent(tid) { if(document.getElementById(tid).style.display == "none") { document.getElementById(tid).style.display = ""; } else { document.getElementById(tid).style.display = "none"; } } function RemoveContent(tid) { if(document.getElementById(tid).style.display == "") { document.getElementById(tid).style.display = "none"; } else { document.getElementById(tid).style.display = ""; } } //--> </script> These are the html links: Code: <div class="listimg"><a href="javascript:RemoveContent('view2','view3','view4'); InsertContent('view1'); swapimg(0); " ><img src="../assets/images/nokia/nokia01_thumb.jpg" id="item0" alt="" style="opacity:.99;" /></a></div> <div class="listimg"><a href="javascript:RemoveContent('view1','view3','view4'); InsertContent('view2'); swapimg(1); "><img src="../assets/images/nokia/nokia02_thumb.jpg" id="item1" alt="" /></a></div> <div class="listimg"><a href="javascript:RemoveContent('view1','view2','view4'); InsertContent('view3'); swapimg(2);"><img src="../assets/images/nokia/nokia03_thumb.jpg" id="item2" alt=""/></a></div> <div class="listimg"><a href="javascript:RemoveContent('view1','view2','view3'); InsertContent('view4'); swapimg(3);"><img src="../assets/images/nokia/nokia04_thumb.jpg" id="item3" alt=""/></a></div> And these are the divs that are being removed and added: Code: <div id="view1" style="display: " > <a href="../assets/images/nokia/nokia01_big.jpg" class="thickbox" title="Windowcling" rel="gallery-art" >view larger1</a> </div> <div id="view2" style="display:none" > <a href="../assets/images/nokia/nokia02_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art2" >view larger2</a> </div> <div id="view3" style="display:none" > <a href="../assets/images/nokia/nokia03_big.jpg" class="thickbox" title="Windowcling3" rel="gallery-art3" >view larger3</a> </div> <div id="view4" style="display:none" > <a href="../assets/images/nokia/nokia04_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art4" >view larger4</a> </div> Any help would be greatly appreciated. Thank you in advance! Hello guys I need to get something fun! with setTimeout function! I am n00b! so be patent please. I need when <body onload="Myfunc();"> fires, that function should show "Please wait...!" or "Loading...". for , say 5 seconds!. then it disappear. I used setTimeout with that but it didn't do what I wanted! here is my code: PHP Code: function Myfunc(){ document.getElementById("ss2").innerHTML = "Loading..."; setTimeout("Myfunc();", 5000); } // where id="ss2" is the place to display the string "loading..." ! and a one more question ! can I do something like a while loop! where it holds *i* value as seconds! and for every second it passes it should print out a string I make it up ! let say loop for 3 seconds ! So, when seconds = 0 then display "string of second 0" and stick it in there, then go to the next second when it is exactly = 1 then display "new line with string of second 1" and stick it in there, then do to the last second when it is exactly = 2 then display " new line with string of second 2" and stick it in there, exit the loop! is there anyway to do that? please note that I am a n00bie ! help is much appreciated ! Is there another JS function that I can use to force a time delay without having the code continue to run? I'm using the setTimeout() function but the call to this function doesn't stop the code flow. I need to stop the code flow while waiting. I guess I need a Sleep() type of JS function. What I'm trying to do is display some blank text on the screen using a for loop (I'm using <BR> to give the appearance of "opening up" a vertical window section in the browser) and I need this 'text' to complete before allowing the following code in the function to execute. The following code will display a Table with rows of data. I'm trying to use a timing function to give a visual impression of a window opening up just before the data displays. Thanks... Hello - I've got this lovely little animation that slides some div fields to the right a short distance. Everything works except the setTimeout (located in the SlideIn function). It simply 'jumps' without taking any time at all. I've tried a bunch of stuff: changed the amount of time from 100 to 10000 changed it from var t = setTimeout("SlideIn()", 1000) SlideIn with/without the brackets, with/without the quotation marks. SlideIn() SlideIn(i) SlideIn(label_id_fixed) SlideIn(label_id_no) Just about at the end of my rope, and so many different combinations I'm forgetting which ones I've tried and which I haven't. I know it is looping through because it gets to the end position and allows the other JavaScript functions to work ok. So it is not getting 'stuck' or anything like that. Here is the complete code (there is a style sheet located separately). Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="class.css" /> </head> <script type="text/javascript"> //<![CDATA[ window.onload=starter; function starter(){ collapseMenu(); SetUpAnimation(); } function SetUpAnimation(){ if (document.querySelectorAll) { labels = document.querySelectorAll('div.label'); } else if (document.getElementsByClassName) { labels = document.getElementsByClassName('label'); } //loops through the labels if (labels){ for (var i=1; i <= labels.length; i++) {SlideIn(i); } } } function SlideIn(label_id_no){ var label_id_fixed = label_id_no; var endPos = 150; var currentPos = 0; for (currentPos = 1; currentPos < 60; currentPos++){ var label_id_name = "label" + label_id_fixed; document.getElementById(label_id_name).style.left = currentPos + "px"; setTimeout("SlideIn", 1000); } } function collapseMenu(){ var elems = null; var labels = null; if (document.querySelectorAll) { elems = document.querySelectorAll('div.elements'); labels = document.querySelectorAll('div.label'); } else if (document.getElementsByClassName) { elems = document.getElementsByClassName('elements'); labels = document.getElementsByClassName('label'); } if (elems){ for (var i=0; i < elems.length; i++) { elems[i].style.display="none"; } for (var i=0; i < labels.length; i++) { labels[i].onclick=showBlock; } } } function showBlock(evnt){ var theEvent = evnt ? evnt : window.event; var theSrc = theEvent.target ? theEvent.target: theEvent.srcElement; var itemId = "elements" + theSrc.id.substr(5,1); var item = document.getElementById(itemId); if (item.style.display=='none'){ item.style.display='block'; }else{ item.style.display='none'; } } //]]> </script> </head> <body> <div class="label" id="label1">this is a label</div> <div class="elements" id="elements1"> <p>painting</p><br /> <p>photography</p><br /> </div> <div class="label" id="label2">this is another label</div> <div class="elements" id="elements2"> <p>sculpture</p><br /> <p>ceramics</p><br /> </div> </body> </html> Okay, for some reason the setTimeout isn't working for me, and I have no idea why. I've tried everything and Googled even more. If anyone has any ideas, I'll be grateful Code: function display(min,sec) { if (sec <= 0) { sec=60; min-=1; } if (min <= -1) { sec=0; min=0; tEnd(); } else { sec = sec-1; } if (sec<=9) { sec = "0" +sec; } document.form.time.value=min+":"+sec; SM = window.setTimeout("display("+min+","+sec+")",1000); } function tEnd() { window.clearTimeout(SM); alert('Your time is up!'); } Thanks in advance. Hi trying to load a random swf files using setTimeout please help Code: </head><script type="text/javascript"> var numberOfSongs = 3 var sound = new Array(numberOfSongs+1) sound[1]= "number/1.mp3" sound[2]= "number/2.mp3" sound[3]= "number/3.mp3" function randomNumber(){ var randomLooper = -1 while (randomLooper < 0 || randomLooper > numberOfSongs || isNaN(randomLooper)){ randomLooper = parseInt(Math.random()*(numberOfSongs+1)) } return randomLooper } var randomsub = randomNumber() var soundFile = sound[randomsub] document.write ('<EMBED src= "' + soundFile + '" hidden=true autostart=true loop=false>') setTimeout(randomNumber,4000); </script> <body onload="randomNumber()"> Im fairly new to javascript, i have mostly been into php i have this code i wrote in one of my projects and i assume theres an easier way Code: setTimeout("check20()", 0); setTimeout("check19()", 50); setTimeout("check18()", 100); setTimeout("check17()", 150); setTimeout("check16()", 200); setTimeout("check15()", 250); setTimeout("check14()", 300); setTimeout("check13()", 350); setTimeout("check12()", 400); setTimeout("check11()", 450); setTimeout("check10()", 500); setTimeout("check9()", 550); setTimeout("check8()", 600); setTimeout("check7()", 650); setTimeout("check6()", 700); setTimeout("check5()", 750); setTimeout("check4()", 800); setTimeout("check3()", 850); setTimeout("check2()", 900); setTimeout("check()", 950); basically every 50 javascript seconds a function is activated, so that means i have a **** ton of function too all doing the same thing just to different ids If you know of a better way let me know please Hello I am just learning, what am I doing wrong here , I'm trying to display an image after 3 seconds after the page opens with js from an external file listed below: Code: <html> <title>Insert Page</title> <body> var call; call=("<?php echo $image1;?>"); function myfunction() { setTimeout =(call, 3000); } document.write(myfunction); </body> </html> Hi there The JavaScript below behaves erratically - sometimes the timing is perfect, at other times it show 20 mins has passed when only 6 has in reallity - quite some gain - I'm baffled! Code: Public Function SessionTime(ByVal DivName As Panel) As String Dim vTime As String = "var sessionTimeout = 19; " & vbCr vTime += "function ReadCookie(cookieName) " & vbCr vTime += "{ " & vbCr vTime += "var theCookie=""""+document.cookie; var ind=theCookie.indexOf(cookieName); " & vbCr vTime += "if (ind==-1 || cookieName=="""") return """";" & vbCr vTime += "var ind1=theCookie.indexOf(';',ind); " & vbCr vTime += "if (ind1==-1) ind1=theCookie.length; " & vbCr vTime += "return unescape(theCookie.substring(ind+cookieName.length+1,ind1));" & vbCr vTime += "} " & vbCr vTime += "function DisplaySessionTimeout()" & vbCr vTime += "{ " & vbCr 'assigning minutes left to session timeout to Label vTime += "if (sessionTimeout > 1) " & vbCr vTime += "{ " & vbCr vTime += "document.getElementById('" & DivName.ClientID & "').innerText = sessionTimeout + "" Minutes remaining until session timeout!""; " & vbCr vTime += "} " & vbCr vTime += "else " & vbCr vTime += "{ " & vbCr vTime += "document.getElementById('" & DivName.ClientID & "').innerText = ""ONLY ONE MINUTE REMAINS UNTIL SESSION TIMEOUT!""; " & vbCr vTime += "}" & vbCr vTime += "sessionTimeout = sessionTimeout - 1; " & vbCr vTime += "var Posted = ReadCookie('PostedValue'); " & vbCr vTime += "if (Posted == 0)" & vbCr vTime += "{ " & vbCr vTime += "sessionTimeout = 19; " & vbCr vTime += "var expires = new Date(); " & vbCr vTime += "expires.setUTCFullYear(expires.getUTCFullYear() + 1); " & vbCr vTime += "document.cookie = 'PostedValue=1; expires=' + expires.toUTCString() + '; path=/'; " & vbCr vTime += "}" & vbCr 'if session is under preset warning vTime += "if (sessionTimeout > 5) " & vbCr '<--------------- 4 vTime += "{ " & vbCr vTime += "document.getElementById('" & DivName.ClientID & "').style.visibility=""hidden""; " & vbCr vTime += "}" & vbCr vTime += "else " & vbCr vTime += "{" & vbCr vTime += "document.getElementById('" & DivName.ClientID & "').style.visibility=""visible""; " & vbCr vTime += "}" & vbCr 'if session is not less than 0 vTime += "if (sessionTimeout >= 1) " & vbCr 'call the function again after 1 minute delay vTime += "{ " & vbCr vTime += "setTimeout('DisplaySessionTimeout()', 60000); " & vbCr '<------60000 vTime += "} " & vbCr vTime += "else " & vbCr vTime += "{ " & vbCr 'show message box vTime += "alert(""Your current Session will expire in approx one minute""); " & vbCr vTime += "} " & vbCr 'vTime += "alert(""Set to "" + ReadCookie('PostedValue')); " & vbCr vTime += "} " & vbCr vTime += "DisplaySessionTimeout();" & vbCr Return vTime End Function Hi all, I am trying to do a simple "animation" of the background color of a button. I want it to do 10 different colors in the course of 1 second. I have a loop like this (pseudo code): Code: var e = "the button element"; var c = 10; while (c--) { setTimeout(function(){ e.style.backgroundColor=(random color); }, (c * 100)); } I expect that 10 instances of "setTimeout" would be created, each one timing out 0.1 seconds later than the previous one, giving me an "animation" of 10 different colors over the course of 1 second. Strangely, it doesn't work. All it does is WAIT one second, then set the background to the LAST color. What am I doing wrong? I can't see it. Thanks! -- Roger Edit: I also tried to do the loop forward instead... no difference. Hi all, I've noticed that setTimeout seems to return a simple integer as it's "id" which can be used to clear the timeout ahead of time. So, in order to have multiple setTimeouts called (which requires the previous one to be cleared before the next one is called), I simply did this: Code: clearTimeout(setTimeout(function() { /* some code */ }, 1000) -1); Note the "-1"... each time this code is called, it starts a new setTimeout and clears "instance-1" which is supposed to be the previous instance. The idea is that this block can be called hundreds of times, and when the calling finally stops, the inner code is executed 1 second later. This SEEMS to be working (yes, even in MSIE!). Question is, am I fooling myself? Is this wrong? If so, what's the right way to do it? Thanks... -- Roger (btw, the actual use of this is dynamic resizing of a DIV by dragging the corner with the mouse.... I want the actual PX size to display live while resizing, then after resizing stops, the size display goes away 1 second later... in case you were wondering). Here is my code: Quote: <script> var confirmationPageURL = "http://google.com"; // Add handler for Ecwid's OnPageLoad event if ( typeof(Ecwid) == 'object' && typeof(Ecwid.OnPageLoad) == 'object' ) { Ecwid.OnPageLoad.add(function(page) { // Redirect user if needed if ( typeof(page) == 'object' && 'ORDER_CONFIRMATION' == page.type ) { window.location = confirmationPageURL; window.setTimeout(confirmationPageURL, 8000, true); } }); } </script> I'm just doing a simple redirect after a purchase is made from a shopping cart I use on my site. However, I can't get the window.setTimeout working. The page is instantly redirected and not 8 seconds. I'm sure I have wrong syntax or placement. Who knows. I know nothing about JS. Any help is appreciated. Thank you |