순서대로 실행되도록 클릭 이벤트를 Mootools로 어떻게 연결할 수 있습니까?

Question

나는 그들이 클릭되었을 때 목록 기능을 발사하는 일련의 버튼을 가지고있다. 목록 함수 자체에는 AJAX 요청과 그 전후에 다른 항목들이 페이지의 별도 섹션에로드됩니다.

var list = function() { } 
$$('.buttons').addEvent('click', list); 

다른 버튼을 클릭하기 전에 목록을 완료 할 때까지 기다려도 문제가 없습니다. 그러나 두 개의 버튼을 빠르게 누르면 페이지가 잘못된 응답을 반환하기 시작합니다. 실제로 응답이 1만큼 동기화되지 않는 것처럼 보입니다. 따라서 버튼 A를 빠르게 누른 다음 버튼 B를 누르면 응답 A가로드됩니다. 그런 다음 버튼 C를 클릭하면 응답이로드됩니다. B.

이 문제를 해결하기 위해 내가 볼 수있는 두 가지 방법이 있습니다 :

1) 어떤 버튼을 클릭하면 다른 버튼에서 클릭 이벤트를 제거하고 목록이 완료되면 복원이. 불행히도, 나는 목록 기능의 상단에 $$('.buttons').removeEvents()을 놓고 시도했다. 그리고 나서 $$('.buttons').addEvent('click', list); 하단에 있지만 이것은 문제에 영향을 미치지 않는다.

2) 앞의 목록이 완료되었을 때만 목록이 실행되도록 클릭 이벤트를 연결하십시오.

아무도 나에게 두 번째 솔루션 작동 방법을 알려 줄 수 있습니까? 또한, 왜 첫 번째 솔루션이 작동하지 않는지, 왜 이상한 지연된 AJAX 응답 동작을 얻는 지 알고있는 사람이 있으면 좋을 것입니다.

Answer 1

요소의 이벤트가 순서대로 발생하지만 비동기 적으로 실행되기 때문에 첫 번째 해결 방법이 작동하지 않습니다. 이벤트가 트리거 될 때 처리 할 수있는 콜백 큐를 설정해야합니다.

addQueuedEvent = function(node, event, callback) { 
    if (typeof callback != "function") { 
     throw "Callback must be a function"; 
    } 

    event = event.toLowerCase(); 
    var eventQueue = "_" + event; 
    if (!node.hasOwnProperty(eventQueue)) { 
     node[eventQueue] = []; 
    } 

    node[eventQueue].push(callback) 
}; 

processEventQueue = function(node, event) { 
    var eventQueue = "_" + event; 
    if (node.hasOwnProperty(eventQueue)) { 
     for (var i=0, l=node[eventQueue].length; i<l; ++i) { 
      node[eventQueue][i](); 
     } 
    } 
}; 

그리고 사용 :

여기에 기본적인 아이디어

var someElement = $("#some-element"); 
addQueuedEvent(someElement, "click", callback1); 
addQueuedEvent(someElement, "click", callback2); 
addQueuedEvent(someElement, "click", callback3); 

someElement.addEvent("click", function() { 
    processEventQueue(this, "click"); 
}); 

구문은 체크 아웃,하지만이 테스트되지 않은 상태입니다. 희망이 도움이됩니다.

Answer 2

개인적으로 클래스에 전역 변수 또는 범위 변수를 설정하거나 'isClicked = false'와 같은 값을 설정합니다.

단순히 체크

하여 클릭 이벤트 기능, 뭔가 같은 :

var isClicked = false, click = function() { 
    if (isClicked) 
     return false; 

    isClicked = true; 
    // ... do stuff, chained or otherwise... 

    // when done, make click function work again: 
    isClicked = false; // you can do this onComplete on the fx class also if you use it 
}; 

내가 효과와 이벤트를 체인에 갈 것이다 - 당신이 애니메이션은 end--하기 위해 단순히 대기, 무슨있는 경우 그렇지 않으면 두 번 클릭하는 것이 길로 생각하는 행복한 사용자의 경우 더러워 질 수 있습니다. 대안은 새로운 클릭에서 발생하는 효과를 중지하거나 취소하는 것입니다. 예를 들어, 당신은 같은 의해 FX를 통해 어떤 트윈 등을 중지 할 수 있습니다

if (isClicked === true) fxinstance.cancel(); 

http://mootools.net/docs/core/Fx/Fx

당신이 할 수있는 다른 일이 클래스

http://mootools.net/docs/core/Class/Class.Extras#Chain

.chain Mootools의보고입니다 또한 모든 fx 인스턴스에서 link : "chain"을 전달하고 간단히 큐에 넣을 수 있습니다.

행운 행운