Question

I was writing code for dragging mechanism which invokes to wait for small period of time before starting the drag operation.

But I am getting this error message in the mouseDownHandler() function.

TypeError: Error #1006: startDrag is not a function.
    at Function/<anonymous>()[C:\blahblah_8216\bobo\flex2\src\ui\map\WorldMap.as:105]
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at SetIntervalTimer/onTimer()
    at flash.utils::Timer/_timerDispatch()
    at flash.utils::Timer/tick()

I have found the solution by slightly changing the code by declaring a clone variable _me of this

 private var _me:WorldMap;

Instantiate it in the constructor

 public function WorldMap(){
     _me = this;
 }

Replacing this with _me in below code works without error

Code

    public var dragInProgress:Boolean = false;
    private var dragTime:int = 100;
    private var dragInProgressInt:int;




     private function mouseDownHandler(event:MouseEvent):void {
        trace(this.name," mouse down ",getTimer());

        dragInProgressInt = setTimeout(function():void
        {
            dragInProgress = true;

            this.startDrag(false,new Rectangle(Config.GAME_SCREEN_WIDTH - Config.FULL_GAME_SCREEN_WIDTH,
                Config.GAME_SCREEN_HEIGHT - Config.FULL_GAME_SCREEN_HEIGHT,
                Config.FULL_GAME_SCREEN_WIDTH - Config.GAME_SCREEN_WIDTH,
                Config.FULL_GAME_SCREEN_HEIGHT - Config.GAME_SCREEN_HEIGHT)); 
        }, dragTime);

    }



    private function mouseUpHandler(event:MouseEvent):void {

        clearTimeout(dragInProgressInt);

        setTimeout(function():void
        {
            dragInProgress = false;
            this.stopDrag();

        }, 1);

Can anyone tell me why this is happening?

Answer 1

The reason startDrag is failing when you use ‘this’ is because you’re calling it from within an ‘anonymous function’, which means the ‘this’ keyword will no longer reference the main class and instead references the function definition. An ‘anonymous function’ is basically a function that isn’t bound to a specific class, read more here.

An alternate way to accomplish what you’d like to do is demonstrated below:

    public var dragInProgress:Boolean = false;
    private var dragTime:int = 100;
    private var dragInProgressInt:int;




     private function mouseDownHandler(event:MouseEvent):void {
        trace(this.name," mouse down ",getTimer());

        dragInProgressInt = setTimeout(mouseDownFinished, dragTime);

    }



    private function mouseUpHandler(event:MouseEvent):void {

        clearTimeout(dragInProgressInt);

        setTimeout(mouseUpFinished, 1);
    }


   private function mouseDownFinished():void
   {
       dragInProgress = true;

       this.startDrag(false,new Rectangle(Config.GAME_SCREEN_WIDTH - Config.FULL_GAME_SCREEN_WIDTH,
           Config.GAME_SCREEN_HEIGHT - Config.FULL_GAME_SCREEN_HEIGHT,
           Config.FULL_GAME_SCREEN_WIDTH - Config.GAME_SCREEN_WIDTH,
           Config.FULL_GAME_SCREEN_HEIGHT - Config.GAME_SCREEN_HEIGHT)); 
   }

   private function mouseUpFinished():void
   {
       dragInProgress = false;
       this.stopDrag();

   }

Notice the functions are now defined within the main class with ‘setTimeout’ passing a reference using the function name. Using ‘this’ within these functions will now reference the main class correctly.