div層的移動(dòng)及性能優(yōu)化

2019-11-21 00:08:07

字體：大中小

供稿：網(wǎng)友

同樣如果一個(gè)頁(yè)面結(jié)構(gòu)很復(fù)雜或者電腦配置不好的話也會(huì)出現(xiàn)這種情況。為了弄清變慢的原因，我們做了幾個(gè)demo對(duì)比，最后發(fā)現(xiàn)在mousemove事件上加上定時(shí)器能改進(jìn)這個(gè)體驗(yàn)。

整個(gè)代碼的關(guān)鍵地方在于當(dāng)鼠標(biāo)按下時(shí)開(kāi)始了的計(jì)時(shí)器，這樣Onmousemove事件會(huì)每隔30ms執(zhí)行一次，然后在鼠標(biāo)松下的時(shí)候清除計(jì)時(shí)器。

timer=setInterval(function(){flag=true;},30);

這樣可以減輕瀏覽器繪制div層的負(fù)擔(dān)，不至于拖動(dòng)時(shí)每時(shí)每刻都在移動(dòng)，其實(shí)太短了人眼也感覺(jué)不到變化，延遲間隔可以自己根據(jù)體驗(yàn)設(shè)置。

復(fù)制代碼代碼如下:

 
function Endrag(source,target){ 
source=typeof(source)=="object" ? source:document.getElementById(source); 
target=typeof(target)=="object" ? target:document.getElementById(target); 
var x0=0,y0=0,x1=0,y1=0,moveable=false,index=100; 
var timer,flag=false; 
var i=0; 
source.onmousedown=function(e){ 
e = e ? e : (window.event ? window.event : null); 
x0 = e.clientX ; 
y0 = e.clientY ; 
x1 = isNaN(parseInt(source.style.left))?0:parseInt(source.style.left); 
y1 = isNaN(parseInt(source.style.top))?0:parseInt(source.style.top); 
moveable = true; 
//當(dāng)鼠標(biāo)按下時(shí)，定時(shí)器開(kāi)始工作，每隔50ms執(zhí)行一次mousemove事件 
timer=setInterval(function(){flag=true;},30); 
}; 
//拖動(dòng); 
source.onmousemove=function(e){ 
e = e ? e : (window.event ? window.event : null); 
if(moveable){ 
if(flag){ 
i++; 
flag=false; 
target.style.left = (e.clientX + x1 - x0 ) + "px"; 
target.style.top = (e.clientY + y1 - y0 ) + "px"; 
} 
} 
}; 
//停止拖動(dòng); 
source.onmouseup=function (e){ 
if(moveable) { 
moveable = false; 
clearInterval(timer); 
//alert(i); 
} 
}; 
//停止拖動(dòng); 
source.onmouseout=function (e){ 
if(moveable) { 
moveable = false; 
clearInterval(timer); 
//alert(i); 
} 
}; 
} 