Я делюпинг страницы, у которой есть большой и перетаскиваемый div. К этому div я прикрепил обработчики событий mousedown, mousemove и mouseup.
Проблема в обработчике события mousemove. Я должен получить текущую ширину, высоту, верх и левую часть от div. Для этого я использую функции для возврата определенных значений, и я должен использовать эти значения в различных условиях внутри основной функции.
Если я попытаюсь назначить локальные переменные с этими значениями и использовать эти переменные в предыдущем коде, тогда сценарий станет медленным. Означает, что есть задержка в изменении размера и перетаскивании.
Но если я вызываю функции каждый раз вместо использования этих переменных в условии, тогда задержки нет.
Что будет причиной этой проблемы ??
Пример кода
// 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;
}