如何使用Mootools鏈接單擊事件，以便它們按順序執行？

Question

我有一系列按鈕，在單擊它們時會觸發列表功能。 列表函數本身包含一個AJAX請求和一堆其他東西，在此之前和之后，它們會加載到頁面的單獨部分中。

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

如果我在單擊另一個按鈕之前等待列表完成，則一切正常。 但是，如果我快速單擊兩個按鈕，頁面將開始返回錯誤的響應。 實際上，似乎響應不同步了1。因此，如果我快速單擊按鈕A，然后單擊按鈕B，它將加載響應A。然后，如果我（稍后）單擊按鈕C，它將加載響應B．

我可以通過兩種方法解決此問題：

1）單擊任何按鈕時，請從其他按鈕中刪除click事件，然后在列表完成后將其恢復。 不幸的是，我嘗試將$$('.buttons').removeEvents()放在列表函數的頂部，然后將$$('.buttons').addEvent('click', list); 在底部，但這對問題沒有影響。

2）鏈接click事件，以便僅在前面的列表完成后才執行列表。

那么有人可以告訴我如何使第二個解決方案起作用嗎？ 此外，如果有人知道為什么第一個解決方案不起作用以及為什么我得到了奇怪的延遲的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”。

然后只需檢查一下click事件功能即可，例如：

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
};

我會反對用效果鏈接事件-如果您正在播放動畫，只需等待它結束-否則對於認為雙擊是可行方式的任何觸發快樂用戶，它都會變得混亂。 另一種方法是停止/取消新點擊所產生的任何效果。 例如，您可以通過FX停止任何補間等，例如：

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

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

您可以做的另一件事是查看mootools .chain類

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

而且，在任何fx實例上，您都可以傳遞鏈接：“鏈”，並簡單地將它們排隊。

祝好運