Question

我有一系列按钮，点击它们时会触发列表功能。 list函数本身包含一个AJAX请求和一堆其他的东西，然后在页面的一个单独部分加载。

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

如果我在点击另一个按钮之前等待列表完成，一切正常。但是，如果我快速单击两个按钮，页面将开始返回错误的响应。事实上，似乎响应不同步1.所以如果我快速点击按钮A然后按钮B，它将加载响应A.然后如果我点击（很久以后）按钮C，它将加载响应乙

我可以通过两种方式来解决这个问题：

1）单击任何按钮时从其他按钮中删除click事件，然后在列表完成后将其恢复。不幸的是，我尝试将$$('.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
};

我会反对用效果链接事件 - 如果你有一个动画正在进行，只需等待它结束 - 否则它会让任何触发快乐的用户感到混乱，认为双击是要走的路。另一种方法是停止/取消新点击时发生的任何效果。例如，您可以通过FX阻止任何补间等：

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

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

你能做的另一件事就是看看mootools .chain class

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

并且，在任何fx实例上，您都可以传递链接：“chain”并简单地将它们排队。

祝你好运

如何使用Mootools链接点击事件，以便它们按顺序执行？

2 个答案: