Ajax에서 mouse wheel의 문제는
휠이 매우연속적이고 다량이 발생한다는 점이다.
이런 휠이베트를 받아서 서버에 갔다와야 한다는 점은
첫번째 요청후 아직 첫번째 요청에 대한 response가 오지않은 상황에서
다음 요청이 오고 이를 block시키는 경우에
사용자에게 좋은 feedback을 주기가 어렵다.
rico live grid에서는 이런한 경우에
다음 요청을 바로 처리하지는 못하지만,
unprocessedRequest에 저장해 두었다가
첫번째 결과 처리후 다시 처리할수 있게 한다.
scroll의 경우는 요청이 1,2,3,4,5가 연속으로 들어 온 경우에
2,3,4를 무시하고 5만 처리하면 된다.
하지만 mouse wheel을 통해서 지도를 확대 축소하는 경우에는
2, 3, 4, 5의 wheelDelta를 합산에서 저장해 주어야 할 것으로 보인다.
rico live grid에서 가져옮
fetchBuffer: function(offset) {
if ( this.buffer.isInRange(offset) &&
!this.buffer.isNearingLimit(offset)) {
return false;
}
if (this.processingRequest) {
this.unprocessedRequest = new LiveGridRequest(offset);
return false;
}
this.processingRequest = new LiveGridRequest(offset);
...
Object.extend(options,this.options);
options.onComplete = this.ajaxUpdate.bind(this);
this.timeoutHandler = setTimeout( this.handleTimedOut.bind(this), this.options.requestTimeout );
new Ajax.Request(this.url, options);
},
requestContentRefresh: function(contentOffset) {
return this.fetchBuffer(contentOffset);
},
ajaxUpdate: function(ajaxResponse) {
try {
clearTimeout( this.timeoutHandler );
...
}
catch(err) {}
finally {
this.processingRequest = null;
}
this.processQueuedRequest();
},
processQueuedRequest: function() {
if (this.unprocessedRequest != null) {
this.requestContentRefresh(this.unprocessedRequest.requestOffset);
this.unprocessedRequest = null
}
}
-- MSDN --
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/onmousewheelEX.htm
<HTML>
<HEAD>
<SCRIPT>
var count = 10;
function Picture()
{
count = Counting(count);
Resize(count);
return false;
}
function Counting(count){
if (event.wheelDelta >= 120)
count++;
else if (event.wheelDelta <= -120)
count--;
return count;
}
function Resize(count){
oImage.style.zoom = count + '0%';
}
</SCRIPT>
</HEAD>
<BODY>
<img id="oImage" src="Sample.jpg" onmousewheel="Picture()" width="283"
height="212" >
</BODY>
</HTML>
출처 : Tong - 드렁크수달스님의 ■ AJAX ■통
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
|
| ☞자세히보기 |
|
|
|
