Being redirected to the wrong place - sometimes...

Question

I have a javascript setInterval that checks an external page every 5 seconds for mail, I am finding sometimes that if I login or click a form submit at the same time as the request goes out, I sometimes find myself looking at a Y or a N (what my JS was to intercept) instead of the real link I wanted to go to.

How does one debug this? I am using firefox with firebug, my app is using PHP with javascript.

EDIT: it's almost as if the onComplete is being missed by java, and it just dumps it as the user is signing in.... it only happens when someone is changing pages and the java is running at the same time.

EDIT 2: If you want to see this for yourself, you'll need visit my site and create an account and go through the signup process (2-3 mins to do tops), the website is http://mikesandmegs.com and the beta password is goldfish. What you want to do is login just as the check mail sends its request off. Its like I need to cancel something or tell java to throw the callback out or something. You should see the requests every 5 seconds, (well it adds 5 seconds each request) but you'll see. It may take a couple try's or some luck, but it is reproducible.

This is the javascript that is running (i think I have it all posted) If I seem to be missing anything, let me know. I also posted an htnl input html that the javascript checks...

<input id="hasMail" type="hidden" value="y">

<script type='text/javascript'>
    mailTimer = setInterval("checkMail();", 10000);

function checkMail()
{
 // should we check the mail now?
 if ($('hasMail').value == "y")
 {
  // remove mail new mail alert (mail-check.php returns y or n
  new Ajax.Request('mail-check.php', 
  { 
   method: 'post', 
   postBody: '',
   onComplete: checkMailNotify 
  });
 }
}

    function checkMailNotify(req)
    {
     if (req.responseText.length > 5)
     {
      $('hasMail').value = "n";
      clearInterval (mailTimer);
      return;
     }

     if (req.responseText == "y")
     {
      $('hasMail').value = "n";
      $('topMessage').update('<a href="/mail-inbox.php">You have new mail...</a>');
      $('alertBox').appear();
      clearInterval (mailTimer);
     }
     else
     {
      clearInterval (mailTimer);
      mailInterval = mailInterval + 5000;
      mailTimer = setInterval("checkMail();", mailInterval);
     }
    }

</script>

Answer 1

I know this is nowhere near a solution, but it WILL help to increase the 5 second interval, even to something like 30 seconds. I've done work with mailservers before, and we often came across problems where people would have e.g their iphone as well as their desktop mail client ping the server at very short intervals. This would result in confusing (to them) failures because of locks.

So yeah, 5 seconds for messages is very quick (it doesn't look like chat but rather just messages, is that right?). At best if you do that then the problem will happen a lot less if it all. You will however have the horrible knowledge that it can happen.

Please don't take this as an attempt at a solution to your problem. just a suggestion.

Answer 2

I think what's happening is that while changing pages, the data from the mail-check.php is clashing with the new request that is coming back from the network at the same time. I think a possible solution is to disable the setInterval whenever you change a page or submit a form, then re-enable it after loading the new data.

Something like:

<input type="button" onClick="clearInterval('mailTimer'); this.submit()" />
...