Clearinterval not working in ajaxrequest - php

Question

I made an ajax call and im calling a setInterval function which is working fine. Unfortunately when im trying to stop it it's not working.
function test(str)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if (str=="?stage=3"){
test('?stage=4');
}
if (str=="?stage=4"){
document.getElementById("main").innerHTML+=xmlhttp.responseText;
prog=window.clearInterval(prog);
}else{
document.getElementById("main").innerHTML+=xmlhttp.responseText;
}
}
else
{
if (str=="?stage=3"){
var prog = self.setInterval( "ajaxrequest('progress_track.php', 'main')", 1000 );
}
}
}
xmlhttp.open("GET","test.php"+str,true);
xmlhttp.send();
}
Any help is really appreciated.
EDIT:
I remade my code because i found out that it calls somehow 3 times the setinveral function. Whit this code it only calls 2 times. I just dont understand why.
var prog = 0;
function test(str)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200 && str=="?stage=3")
{
test('?stage=4');
}else{
if( str=="?stage=3"){
prog = self.setInterval( "ajaxrequest('progress_track.php', 'main')", 1000 );
}
}
if (xmlhttp.readyState==4 && xmlhttp.status==200 && str=="?stage=4")
{
prog=window.clearInterval(prog);
}
if (xmlhttp.readyState==4 && xmlhttp.status==200 && str!="?stage=4" && str!="?stage=3")
{
document.getElementById("main").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.php"+str,true);
xmlhttp.send();
}
But the cleariterval still not working.
EDIT:
I found the problem. Whit this code it never arrives in this state:
if (xmlhttp.readyState==4 && xmlhttp.status==200 && str=="?stage=4")
{
prog=window.clearInterval(prog);
}
Now the only question is why not?

Answer 1

You need to declare "prog" at a higher scope. You could move it outside of your function declaration:
var prog;
function test(str) {
...
if (str=="?stage=3"){
prog = self.setInterval(
"ajaxrequest('progress_track.php', 'main')", 1000
);
}
...
}
The way you've got it right now, prog is undefined when you call clearInterval()

Answer 2

The reason it's not working is because you're declaring the variable to keep the timer ID inside your function, yet you're trying to use it before it's defined. When you are trying to clear it, the variable is not defined. What you can do is define the variable outside and then use it. Something like this:
var prog = 0;
function test(str)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if (str=="?stage=3"){
test('?stage=4');
}
if (str=="?stage=4"){
document.getElementById("main").innerHTML+=xmlhttp.responseText;
prog=window.clearInterval(prog);
}else{
document.getElementById("main").innerHTML+=xmlhttp.responseText;
}
}
else
{
if (str=="?stage=3"){
prog = self.setInterval( "ajaxrequest('progress_track.php', 'main')", 1000 );
}
}
}
xmlhttp.open("GET","test.php"+str,true);
xmlhttp.send();
}
You may also want to check whether it's 0 before clearing. If it's 0 it means it's not set yet and it doesn't need to be cleared.