...

View Full Version : timeout + interval = fail



resin
06-22-2012, 01:39 PM
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?

DaveyErwin
06-22-2012, 03:11 PM
do it more like this
and you avoid all those
escape issues …


<!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>

Lerura
06-22-2012, 03:26 PM
You need to double-escape all characters in the setInterval.

When the settimeout reads the command it unescapes all escaped characters once.
so:

setTimeout('setInterval(\'document.title=\'Welcome\'\', 1000)',2000)gives the command

setInterval('document.title='Welcome'', 1000)

in order to get the right setInterval you need to write it
setTimeout('setInterval(\'document.title=\\\'Welcome\\\'\', 1000)',2000)

resin
06-22-2012, 04:23 PM
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.



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?

DaveyErwin
06-22-2012, 04:32 PM
Try this ...


<!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>

resin
06-22-2012, 05:25 PM
Excellent, everything is working properly now. Thank you very much. Wow just realized I've posted 100 times! Yay :)

Lerura
06-22-2012, 08:20 PM
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?


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:
></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.

felgall
06-22-2012, 08:31 PM
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.

Lerura
06-22-2012, 08:57 PM
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.

resin
06-23-2012, 02:43 PM
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?

felgall
06-23-2012, 10:15 PM
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.


(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);
})();

resin
06-24-2012, 12:00 PM
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?

Lerura
06-24-2012, 12:00 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum