サイズ変更可能でドラッグ可能な 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;
}