1 Reply Latest reply on Oct 13, 2009 4:07 AM by mewk

    Is setTimeout the best option?

    saveth

      I'm setting a HSlider value based on user input from a TextInput and want the change to the HSlider to be delayed by two seconds or so. Just long enough to where a user can keep typing and it isn't constantly updating the HSlider.

       

      I have this working by using setTimeout but I want to know if this is the best way? Say I enter five characters into the TextInput, is it running the change handler and the setTimeout 5 times?

       

      protected function wagesTextInput_changeHandler(event:TextOperationEvent):void
      {
           setTimeout(commitText, 2000);
      }
      
      private function commitText():void
      {
           wagesHSlider.value = Number(wagesTextInput.text);
      }
      

       

      Thanks,

      Brian

        • 1. Re: Is setTimeout the best option?
          mewk Level 3

          Hey Saveth,

           

          As you have written it, yes, the code will execute the setTimeOut() five times after five character inputs.

           

          You can test this out for yourself by placing a breakpoint inside the function. You wouldn't be able to notice this when running the app because, when you quickly finish typing, the slider would update five times to the same value (where value = current textInput::text).

           

          Also I'm not sure if the code achieves the intent you want. This code will update the slider 2000 ms after the user begins typing their first character input. So if the user takes longer than 2 sec (for whatever reasons) they will begin to see the slider bouncing around as they type (which is what it seem like you were trying to avoid).

           

          If you are really determined to achieve a certain behavior -- where the slider is updated 2 s after the user has stopped inputing -- you might try checking to make sure 2 s has gone before the update, as the following code demonstrates:

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                         xmlns:s="library://ns.adobe.com/flex/spark" 
                         xmlns:mx="library://ns.adobe.com/flex/halo">
          
                <fx:Script>
                   <![CDATA[
                       import spark.events.TextOperationEvent;
          
                       private var lastTimeEdited:Date;
                       private var myTimer:Number = 2000;
          
                       private function updateTimeEdited():void {
                           lastTimeEdited = new Date();
                           setTimeout(commitText, myTimer);
                       }
               
                       private function commitText(): void {
                           var currentTime:Date = new Date;
                           var deltaTime:Number = currentTime.time - lastTimeEdited.time;
          
                           if (deltaTime >= myTimer) {
                                myHorizontalSlider.value = int(myTextInput.text);
                           }
                       } 
          
                   ]]>
                </fx:Script>
          
                <s:VGroup horizontalCenter="0" verticalCenter="0">
                     <s:TextInput id="myTextInput" width="40"
                                  change="updateTimeEdited()"/> 
                     <s:HSlider id="myHorizontalSlider" width="150"
                                minimum="0" maximum="1000" stepSize="1"/>
                </s:VGroup>
          
          </s:Application>
          

           

          Anyway, this is NOT really how I would solve the problem. It's much simpler to use a more apt event and I suggest you go through the entire event list and see if you can find a better one. For instance, we can be reasonably certain the user is finished when they leave the component, so we could just program around the focusOut event rather than burden our code with timeouts or deltaTimes.

           

          - e

          1 person found this helpful