이는 페이지 구조가 매우 복잡하거나 컴퓨터 구성이 좋지 않은 경우에도 발생합니다. 속도 저하의 원인을 이해하기 위해 몇 가지 데모 비교를 수행한 결과 마침내 mousemove 이벤트에 타이머를 추가하면 경험이 향상될 수 있다는 사실을 발견했습니다.
전체 코드의 핵심은 마우스를 눌렀을 때 시작되는 타이머로, 30ms마다 Onmousemove 이벤트가 실행되고 마우스를 놓으면 타이머가 지워집니다.
timer=setInterval(function(){flag=true;},30);
이렇게 하면 브라우저가 div 레이어를 그리는 부담을 줄일 수 있습니다. 드래그할 때마다 그려집니다. 움직일 때 실제로 인간의 눈이 변화를 감지하기에는 너무 짧습니다. 지연 간격은 경험에 따라 직접 설정할 수 있습니다.
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 타이머,flag=false;
var i=0
source.onmousedown= function(e ){
e = e ? e : (window.event ? window.event : null)
x0 = e.clientX ;
y0 = e.clientY ; (parseInt( source.style.left))?0:parseInt(source.style.left);
y1 = isNaN(parseInt(source.style.top))?0:parseInt(source.style.top);
moveable = true;
//마우스를 누르면 타이머가 작동하기 시작하고 50ms마다 mousemove 이벤트를 실행합니다.
timer=setInterval(function(){flag=true;},30); 🎜> }//드래그;
source.onmousemove=function(e){
e = e ? e : (window.event ? window.event : null); ) {
if(flag){
i ;
flag=false;
target.style.left = (e.clientX x1 - x0 )
target.style. top = (e.clientY y1 - y0 ) "px";
}
}
//드래그 중지; if(moveable) {
moveable = false;
//alert(i)
}
}; source.onmouseout=function (e){
if(moveable) {
moveable = false;
clearInterval(timer)
//alert(i); ;
}