Pause the code execution

[nathj]

Hi,

I have a strange problem, my code is running too quickly. Allow me to explain (if I can).

I am using the XMLHTTP object in order to query the database as a user completes the membership application form, basically I want to ensure that each username is unique.

I have the code to check this and the XMLHTTP object is working fine. However, before the code finishes executing the next part of the function is run. this means that the array I have for storing if items are valid or not is being populated incorrectly.

I only check the database if the first stage of validation returns true. At present I have a bit of a fudge in place in that I have added an alert box, as you can see in the code below, this seems to pause the code, which then results in the correct behaviour. Without this I get told that the username I entered is in the database but the system allows me to continue because the validation flag says true because the user name followed the regular expression in place.

Here is the code

function writeResponse() 
{ 
    if (goXMLHTTP.readyState==4 || goXMLHTTP.readyState=="complete")
    { 
       // I did hav a line here testing status=200 but it didn't make any difference document.getElementById(gcItemID).innerHTML=goXMLHTTP.responseText;  
        // set glIsValid based on the return from the database
        glIsValid = goXMLHTTP.responseText.search(/warninglabel/i)>0? false:true; 
    } 
} 
 
function GetXmlHttpObject()
{ 
    if (window.XMLHttpRequest)
    {
        goXMLHTTP=new XMLHttpRequest()
    }
    else if (window.ActiveXObject)
    {
        goXMLHTTP=new ActiveXObject("Microsoft.XMLHTTP")
    }     
    if (goXMLHTTP==null)
    {
        alert ("Browser does not support HTTP Request")
         return    
    } 
} 
 
 
function validateItem(pcID,pcItem,pcDisplay,pnType,plPopulateExtra,pnNumberOfItems,plCheckDatabase,pnListItem)    
{    
    var lcRegExp, llUseRegExp
    var lnItemsToValidate = 0 
    glIsValid = false 
    llUseRegExp = false
    switch (pnType)
    {
        case 1:    // UK postcode
            pcItem = pcItem.toUpperCase()     
            lcRegExp = '^[A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA$' 
            break;
        case 2: // email address
            lcRegExp = '^[_A-Za-z0-9-]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9-]+)*$'
            break;
        case 3: // number of set length - basic telephone number check
            lcRegExp = '^[0-9 ]{6,13}$'                                            
            break;
        case 4: // password validation - alpha numeric characters 6-18 characters long
            lcRegExp = '^[A-Za-z0-9]{6,18}$' 
            break;    
        case 5: // username validation - alpha numeric characters 6-18 characters long
            lcRegExp = '^[A-Za-z0-9]{6,18}$' 
            break;
        default: // all other validation items
            lcRegExp = '^[A-Za-z0-9 ]{2,30}$'
            break;                         
    }
 
    glIsValid = pcItem.match(lcRegExp)?true:false;
 
    // set the display now
    if (plCheckDatabase) // check the database
    {                         
        if(glIsValid) // only check the database if the item to check is valid from the first stage
        {
            GetXmlHttpObject() // sets the global variable goXMLHTTP
            gcItemID = pcID
            gcUrl = "../lib/datacheck.php?check=" + pnType +"&tocheck='" + pcItem + "'"
            goXMLHTTP.onreadystatechange=writeResponse 
            goXMLHTTP.open("GET",gcUrl,true)
            goXMLHTTP.send(null)
            // update gaValidationList accordingly    
            alert("Checking the database for availability" + '\n' + "Click 'OK' to continue")  // this is used to simply prevent the code from running ahead of itself and explain the process to the user
            // it would be good if a better way could be established - THIS IS THE FUDGE
            setValidationList(pnListItem)
        }
    }
    else // set the display
    {
        document.getElementById(pcID).innerHTML = glIsValid? pcDisplay:"<span class='warninglabel'>" + pcDisplay + "</span>";
        // update gaValidationList accordingly    
        setValidationList(pnListItem)
    }    
 
 
    // structure to ensure that the form is only valid when it is valid
    for (lnItem in gaValidationList)
      {      
        if (gaValidationList[lnItem] == false)
        {
            lnItemsToValidate++
        }
    }     
 
    if (lnItemsToValidate == 0)// everything is valid - let the user continue by setting the disabled property of an item    
    {
        hideOrShowInput("complete",false)    
    }
    else // something is invalid, the user will be able to tell, they need to complete this before moving on 
    {
        hideOrShowInput("complete",true)    
    }
 
    if (plPopulateExtra)
    {
         populateExtra(lcSource, lcDestination, true, true)
    } 
}    
 
function setValidationList(pnListItem)
{
    // gaValidationList is a global array - for the life of the page using it at least    
    gaValidationList[pnListItem] = glIsValid 
}
 

That's all the functions involved at this stage. The PHP file referenced there simply runs some data checks and writes the relevant response back to the screen, so if the item exists the label written to the screen will contain the string "warninglabel"

Is there a better way of pausing the code? I tried setTimeout but that didn't have the desired results.

Any suggestions at all will be welcome. Generally I am quite pleased with this form and the way it validates as the user types - the validateItem() function is called from the onchange event of the input boxes.

Many thanks
Nathan

[pbmods]

Heya, Nathan.

Try calling setValidationList() directly inside of writeResponse().

See this thread for more info.

[nathj]

Heya, Nathan.

Try calling setValidationList() directly inside of writeResponse().

See this thread for more info.

I have read the other thread, and felt a bit of a fool for forgetting what Asynchronous meant.

The trouble I have with calling setValidationList() directly is that I can't pass parameters into the function from onreadystatechange.

If I code cause the cde to pause for a bit, without the alert that would be perfect (if a bit of a fudge). Is there are any effective way of doing this?

Alternatively is there a way of passing paramters into the function that is called from onreadystatechange? If there is then perhaps I can move my call to setValidationList() into writeResponse(). That way the code that sets the glIsValid variable will have executed by the time the setValidationList() function is called.

Thanks for the help so far, I have already learnt a lot more about this sort of development.
nathj

[pbmods]

Heya, Nathan.

The trouble I have with calling setValidationList() directly is that I can't pass parameters into the function from onreadystatechange.

See this article.

[nathj]

Heya, Nathan.



See this article.

An excellent article, that has cleared a few things up for me.

Unfortunately the code that checks the validation list array is still executing before the code called by onreadystatechange completes. It seems that the only way to the stop this is with an alert. It is a complete fudge I know, but I have learnt quite a lot through this process.

While the alert works in that it appears to prevent subsequent code from executing until the user acts it does seem to reduce accessibility a bit. Is there a better way of causing the code to wait without relying on the user?

Many thanks
Nathan

[pbmods]

Heya, Nathan.

While the alert works in that it appears to prevent subsequent code from executing until the user acts it does seem to reduce accessibility a bit. Is there a better way of causing the code to wait without relying on the user?

[Un]fortunately, JavaScript has no sleep() function. The only way to delay execution is to use the setTimeout() function.

[nathj]

Heya, Nathan.



[Un]fortunately, JavaScript has no sleep() function. The only way to delay execution is to use the setTimeout() function.

Hi pbmods,

First, thanks for all the help so far.

I tried to play around with the setTimeout() function and couldn't get this to work. What I tried was:

var lnTime = setTimeOut(setValidationList(pnListItem), 3000);
 

I must admit I didn't really understand what I was doing I was simply following some instructions I had seen some place on the web. I do prefer to understand why and how something works.

Cheers
Nathan

[pbmods]

Heya, Nathan.

var lnTime = setTimeOut(setValidationList(pnListItem), 3000);
 

I must admit I didn't really understand what I was doing I was simply following some instructions I had seen some place on the web. I do prefer to understand why and how something works.

setTimeout() takes two arguments: An object to be evaluated and a number that represents the number of milliseconds to wait before evaluating the object.

Since JavaScript will try to execute setValidationList(), you have to instead create an anonymous function and pass that to setTimeout():

var lnTime = setTimeOut(function() { setValidationList(pnListItem); }, 3000);
 
// Or spaced out, if you prefer....
var lnTime = setTimeOut(
    function() {
        setValidationList(pnListItem);
    },
    3000);
 

After 3000 milliseconds, the browser will evaluate the function that you created, which executes setValidationList(). Note that this will only work properly if your AJAX call returns within 3 seconds.

[nathj]

Heya, Nathan.



setTimeout() takes two arguments: An object to be evaluated and a number that represents the number of milliseconds to wait before evaluating the object.

Since JavaScript will try to execute setValidationList(), you have to instead create an anonymous function and pass that to setTimeout():

var lnTime = setTimeOut(function() { setValidationList(pnListItem); }, 3000);
 
// Or spaced out, if you prefer....
var lnTime = setTimeOut(
    function() {
        setValidationList(pnListItem);
    },
    3000);
 

After 3000 milliseconds, the browser will evaluate the function that you created, which executes setValidationList(). Note that this will only work properly if your AJAX call returns within 3 seconds.

Hi pbmods,

I gotta say I really appreciate you taking the time to help. I have played around with this function, and thanks to your explanation i actually have a better understanding of what I am doing and how and why it should work.

I have spent some time messing around with this idea of delaying code execution and finally decided that I don't really like the idea. So, As I need to do something like that I figure user information is the best way forward, this leaves me with the alert to inform the user what is happening at this stage.

This solution still seems like a bit of a fudge to me but hopefully it wont look out of place when the site goes live (probably next year).

What do you think of this solution? I respect your opinion and if you woudl be good enough to spare the time to share it I'd really appreciate it.

Once again many thanks
Nathan

[pbmods]

Heya, Nathan.

The problem with delaying your code's execution (whether by using a timer or by using an alert) is that you don't really know when your AJAX call returns. Ideally, if you get a response sooner, you'll want to display the results sooner.

As you're aware, you can accomplish this by using http's onreadystatechange handler. But what if (as you mentioned) you need to pass extra arguments or call additional functions?

Check out your setTimeout call:

var lnTime = setTimeOut(
    function() {
        setValidationList(pnListItem);
    },
    3000);

You can use the same principle when you set goXMLHTTP.onreadystatechange in validateItem() (line 68 in your OP):

goXMLHTTP.onreadystatechange=function() {
    writeResponse();
    setValidationList(pnListItem);
};

[nathj]

Heya, Nathan.

The problem with delaying your code's execution (whether by using a timer or by using an alert) is that you don't really know when your AJAX call returns. Ideally, if you get a response sooner, you'll want to display the results sooner.

As you're aware, you can accomplish this by using http's onreadystatechange handler. But what if (as you mentioned) you need to pass extra arguments or call additional functions?

Check out your setTimeout call:

var lnTime = setTimeOut(
    function() {
        setValidationList(pnListItem);
    },
    3000);

You can use the same principle when you set goXMLHTTP.onreadystatechange in validateItem() (line 68 in your OP):

goXMLHTTP.onreadystatechange=function() {
    writeResponse();
    setValidationList(pnListItem);
};

Thank you so much. I really appreciate this, you are truly a star! I have now got this to behave as I want it without any dodgy alerts or unecessary waiting around. This has made my day. I couldn't have done it without your help.

More importantly than it working is the fact that I know understand why it works. This is always my ultimate aim, so a real big thnkyou for that too.
Cheers
Nathan

[pbmods]

Heya, Nathan.

That's great to hear that you were able to get it working!

Good luck with your project, and if you ever need anything, post back anytime :)