Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts

    timeout + interval = fail

    I have this script,

    setTimeout('setInterval(\'document.getElementById("testDiv").innerHTML = "<object type=\'application/x-shockwave-flash\' data=\'testAudio.swf\' width=\'30\' height=\'30\'><param name=\'movie\' value=\'testAudio.swf\'><param name=\'wmode\' value=\'transparent\'></object>";\', 15000)', 10000)

    What I'm trying to do with this, is replace the innerHTML content in testDiv after 10 seconds, and then replace it again every 15 seconds thereafter. But instead, it never gets replaced at all, not even once. However if I remove the setTimeout to leave the code looking like this, then the div content does get replaced every 15 seconds.

    setInterval('document.getElementById("testDiv").innerHTML = "<object type=\'application/x-shockwave-flash\' data=\'testAudio.swf\' width=\'30\' height=\'30\'><param name=\'movie\' value=\'testAudio.swf\'><param name=\'wmode\' value=\'transparent\'></object>";', 15000)

    Why doesn't it work after adding the setTimeout? I've used setTimeout and setInterval together like this before for other functions and it had worked as expected, so I really don't understand why it's not working in this case. I also tried escaping each double quote thinking that may be the problem, but it still didn't work. I'm out of ideas?

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    do it more like this
    and you avoid all those
    escape issues …

    Code:
    <!doctype html>
    <head>
    <title>timeOut</title>
    
    </head>
    <body><div>
    <div id="testDiv"></div>
    <script>
    var testDiv = document.getElementById('testDiv');
    function setinterval(){
    	setInterval(interval,10000);
    }
    function interval(){
    	testDiv.innerHTML = content;
    }
    var content = "<object type='application/x-shockwave-flash' data='testAudio.swf' width='30' height='30'><param name='movie' value='testAudio.swf'><param name='wmode' value='transparent'></object>"
    setTimeout(setinterval, 10000)
    </script>
    </body>
    </html>
    Last edited by DaveyErwin; 06-22-2012 at 04:10 PM.

  • #3
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    881
    Thanks
    0
    Thanked 115 Times in 114 Posts
    You need to double-escape all characters in the setInterval.

    When the settimeout reads the command it unescapes all escaped characters once.
    so:
    Code:
    setTimeout('setInterval(\'document.title=\'Welcome\'\', 1000)',2000)
    gives the command
    Code:
    setInterval('document.title='Welcome'', 1000)
    in order to get the right setInterval you need to write it
    Code:
    setTimeout('setInterval(\'document.title=\\\'Welcome\\\'\', 1000)',2000)

  • Users who have thanked Lerura for this post:

    resin (06-22-2012)

  • #4
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Davey, your code didn't work as is, but I made a few slight changes which got it to work somewhat. The only problem now is that it doesn't replace the testDiv content until exactly 25 seconds. It seems to be adding the timeout and interval times together (10+15=25). After the first 25 seconds, it does replace the content again every 15 seconds thereafter. But why is the setTimeout behaving that way? It should be replacing the content at 10 seconds, not 25. Here is what I have now after making those few changes.

    Code:
    var testDiv = document.getElementById('testDiv');
    function setinterval(){
    	setInterval(interval,15000);
    }
    function interval(){
    	document.getElementById('testDiv').innerHTML = content;
    }
    var content = "<object type='application/x-shockwave-flash' data='testAudio.swf' width='30' height='30'><param name='movie' value='testAudio.swf'><param name='wmode' value='transparent'></object>"
    setTimeout(setinterval, 10000)
    Lerura, I tried adding the extra backslashes but it didn't change anything. Using your method, the div content still never gets replaced at all. Would you mind showing me how you'd double-escape with the first code I posted?

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Try this ...

    Code:
    <!doctype html>
    <head>
    <title>nextObject</title>
    
    </head>
    <body><div>
    <div id="testDiv"></div>
    <script>
    var testDiv = document.getElementById('testDiv');
    function setinterval(){
    interval();
    	setInterval(interval,15000);
    }
    function interval(){
    	testDiv.innerHTML = content;
    //alert(document.getElementById('testDiv').innerHTML)
    }
    var content = "<object type='application/x-shockwave-flash' data='testAudio.swf' width='30' height='30'><param name='movie' value='testAudio.swf'><param name='wmode' value='transparent'></object>"
    setTimeout(setinterval, 10000)
    </script>
    </body>
    </html>
    Last edited by DaveyErwin; 06-22-2012 at 04:41 PM.

  • The Following 2 Users Say Thank You to DaveyErwin For This Useful Post:

    LOLmaster11 (06-23-2012), resin (06-22-2012)

  • #6
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Excellent, everything is working properly now. Thank you very much. Wow just realized I've posted 100 times! Yay

  • #7
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    881
    Thanks
    0
    Thanked 115 Times in 114 Posts
    Quote Originally Posted by resin View Post
    Lerura, I tried adding the extra backslashes but it didn't change anything. Using your method, the div content still never gets replaced at all. Would you mind showing me how you'd double-escape with the first code I posted?
    Code:
    setTimeout('setInterval(\'document.getElementById("testDiv").innerHTML = "<object type=\\\'application/x-shockwave-flash\\\' data=\\\'testAudio.swf\\\' width=\\\'300\\\' height=\\\'300\\\'><param name=\\\'movie\\\' value=\\\'testAudio.swf\\\'><param name=\\\'wmode\\\' value=\\\'transparent\\\'></object>"\', 15000)', 10000);
    Notice:
    I have removed the semicolon that you had placed with the setInterval:
    Code:
    ></object>";\', 15000)', 10000)
    and placed it at the end of the line instead.
    You original placement of the semicolon is a syntax error that breaks the setInterval, and the command line was furthermore not ended properly.
    Last edited by Lerura; 06-22-2012 at 08:23 PM.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,589
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Quote Originally Posted by Lerura View Post
    You need to double-escape all characters in the setInterval.
    You shouldn't be using strings in setTimeout or setInterval at all - they both expect a function and if you give them a string then they need to eval() it.

    As you can see the resulting code that worked was much simpler once the strings were converted to functions.

    You could do it all in one line using:

    setTimeout(function(){testDiv.innerHTML = content;setInterval(function() {testDiv.innerHTML = content;},15000);}, 10000);

    With the calls written properly there is nothing to escape at all.
    Last edited by felgall; 06-22-2012 at 08:36 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    881
    Thanks
    0
    Thanked 115 Times in 114 Posts
    Quote Originally Posted by felgall View Post
    You shouldn't be using strings in setTimeout or setInterval at all - they both expect a function and if you give them a string then they need to eval() it.

    As you can see the resulting code that worked was much simpler once the strings were converted to functions.

    You could do it all in one line using:

    setTimeout(function(){testDiv.innerHTML = content;setInterval(function() {testDiv.innerHTML = content;},15000);}, 10000);

    With the calls written properly there is nothing to escape at all.
    I agree that the best way is to avoid strings, and thereby an automatic eval(), in the command line, though it is possible as shown in my previous post.

    Still you can see an example of how multi-escaping is properly written.

  • #10
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Felgall, thanks for the simpler method. Just a general question, does it matter where the global variables are placed in the script? Does it ever matter what order global var's are in or if they are placed before or after a function? I've seen scripts posted in the forum, which have some global var's placed before a function and then some placed after (all called from within the same function), so I'm just wondering if there's a reason why they didn't just keep them all together above or all below the function?

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,589
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Quote Originally Posted by resin View Post
    does it matter where the global variables are placed in the script?
    In a properly written script there will only be one or two global variables and everything else will be local to a function. For example if you are using jquery then the jquery and possibly $ variables will be global and everything else can be defined inside your function. If you are using prototype then $ is global and everything else can be defined inside your function.

    Variables can be declared anywhere within their scope because they will exist for that period anyway. If you assign them a value then that value only applies from when you assigned it. With your code assigning a value to content second only works because there is a ten second delay before it is referenced.

    All the variables in a function exist from the start of a function to its end so the clearest point to declare them is all together at the start.

    I would write the code like this so that it doesn't have global variables and it is easy to see what local variables it has.

    Code:
    (function() {
    "use strict";
    var testDiv, content;
    testDiv = document.getElementById('testDiv');
    content = "<object type='application/x-shockwave-flash' data='testAudio.swf' width='30' height='30'><param name='movie' value='testAudio.swf'><param name='wmode' value='transparent'></object>";
    setTimeout(function(){testDiv.innerHTML = content;setInterval(function() {testDiv.innerHTML = content;},15000);}, 10000);
    })();
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #12
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Felgall, this is not working for some reason. Checked JS console and nothing listed there. Not sure what's wrong here..

    Also, I've not seen the "use strict" string before. From the quick search I just did, it looks like it's used for preventing local var's from being called by outside functions? I didn't think that was possible anyway.. But do you recommend using "use strict" in all functions that include local variables?

  • #13
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    881
    Thanks
    0
    Thanked 115 Times in 114 Posts
    Quote Originally Posted by resin View Post
    Ah thank you. I've not seen the "use strict" string before. From the quick search I just did, it looks like it's used for preventing local var's from being called by outside functions? I didn't think that was possible anyway.. But do you recommend using "use strict" in all functions that include local variables?
    The other way around
    It prevents you from accidentially creating/modifying global variables from inside the function.

    Your are right: You can't access local variables from outside the function. but you can access global variable from inside the function.

    You can see "use strict" as a kind of security.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •