Hi, I am delevoping a page which has a re sizable and draggable div. An I have attached mousedown, mousemove and mouseup event handlers to this div.
The problem is with the mousemove event handler. I have to get the current width, height, top and left of the div. For that I am using functions to return the specific values and I have to use these values in different conditions inside the main function.
If I try to assign local variables with these values and use these variables in the preceeding code then the script becomes slow. Means there's a delay in the resizing and dragging.
But if I call the functions each time instead of using these variables in the condition then there's no delay.
What will be the cause of this problem??
Code Sample
// Code executes with a delay
function AdjustElement()
{
var elemHeight = GetHeight ( elem );
var elemWidth = GetWidth ( elem );
var elemTop = GetTop ( elem );
var elemLeft = GetLeft ( elem );
if ( elemLeft >= 20 && elemRight <= 200 )
{
//code for moving element
}
if ( elemTop >= 20 && elemTop <= 200 )
{
// code for moving element
}
if ( elemHeight >= 60 && elemHeight <= 300 )
{
// code for resizing element
}
if ( elemWidth >= 60 && elemWidth <= 300 )
{
// code for resizing element
}
}
// Code executes without delay
function AdjustElement()
{
if ( GetLeft(elem) >= 20 && GetRight(elem) <= 200 )
{
//code for moving element
}
if ( GetTop(elem) >= 20 && GetTop(elem) <= 200 )
{
// code for moving element
}
if ( GetHeight(elem) >= 60 && GetHeight(elem) <= 300 )
{
// code for resizing element
}
if ( GetWidth(elem) >= 60 && GetWidth(elem) <= 300 )
{
// code for resizing element
}
}
// General functions
function GetWidth(elem)
{
return elem.offsetWidth;
}
function GetHeight(elem)
{
return elem.offsetHeight;
}
function GetTop(elem)
{
return elem.offsetTop;
}
function GetLeft(elem)
{
return elem.offsetLeft;
}