SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    variable scope issue

    Hi,
    I'm implementing a variation on the type ahead theme. User will type into a field and 500ms after the last keyup I'll perform an Ajax request.

    Below is a snippet of my code on the keyup event.
    Code:
     var readyToCheck = false;
     
     //PROCESS KEYUP
     var processKey = function(e) {
     		
     		readyToCheck = false;
     		
     		//Time to start Ajax request
     		setTimeout(function(){readyToCheck = true;}, 500);
     		
     
     		if(readyToCheck) {
     			//Perform Ajax request here
     		}
     	}
    On each keyup the readyToCheck is set to false to prevent having an Ajax request for every character. After 500ms with no keypresses it should be set to true, and the Ajax request performed.
    The timeout is running, but I suspect it's not operating on the correct scope of readyToCheck

    How do I get the setTimeout to set the main readyToCheck var to true so my Ajax can happen?

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cranial-bore
    Hi,
    I'm implementing a variation on the type ahead theme. User will type into a field and 500ms after the last keyup I'll perform an Ajax request.

    Below is a snippet of my code on the keyup event.
    Code:
     var readyToCheck = false;
     
     //PROCESS KEYUP
     var processKey = function(e) {
     		
     		readyToCheck = false;
     		
     		//Time to start Ajax request
     		setTimeout(function(){readyToCheck = true;}, 500);
     		
     
     		if(readyToCheck) {
     			//Perform Ajax request here
     		}
     	}
    On each keyup the readyToCheck is set to false to prevent having an Ajax request for every character. After 500ms with no keypresses it should be set to true, and the Ajax request performed.
    The timeout is running, but I suspect it's not operating on the correct scope of readyToCheck

    How do I get the setTimeout to set the main readyToCheck var to true so my Ajax can happen?
    You're setting readyToCheck to false within the function, therefore it must always be false when tested, irrespective of the timeout setting it to true.
    Try:
    Code:
    if(readyToCheck)
    {
     readyToCheck=false;
    
     //Perform Ajax request here
    }

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What's happening with your code is:
    - readyToCheck is set to false.
    - we set a timer to set readyToCheck to true in .5 seconds.
    - we check readyToCheck again, is it true? No, because we are checking it almost immediately after setting the function.

    You don't really need a readyToCheck variable, what you are attempting can be done with just the timeout, here's how:
    Code:
    var theTimeout;
    var processKey = function(e) {
    	// user pressed a key, abort the timeout if it is counting down
    	if( theTimeout ) {
    		clearTimeout(theTimeout);
    	}
    	// set a timeout to run in 500 msec
    	theTimeout = setTimeout(processAjaxFunction, 500);
    }

  4. #4
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that. Got my stuff happening.


Bookmarks

Posting Permissions

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