Jquery 以编程方式触发事件并等待上一个事件的动作完成以触发下一个答案

【问题标题】：Jquery Trigger Events programmatically and wait until the action of previous event is complete to fire next oneJquery 以编程方式触发事件并等待上一个事件的动作完成以触发下一个
【发布时间】：2013-06-15 14:04:03
【问题描述】：

我是 jquery 的新手。假设我有一个包含 10 个“a”标签的列表，它们都分别附加到事件处理程序 mouseover、click、mouseout。
我想要做的是遍历所有“a”元素并使用 jquery 触发器触发这些事件。
我面临的问题是，这些事件需要一些时间才能触发，因此当我运行代码时，我只看到最后一个元素的结果发生变化。而不是中间体。

$.each($("#styles a"), function(){
    console.log("picked up " + $(this));
    setTimeout(qwe($(this)), 2000);
});

function qwe(obj) {
    console.log(obj.attr("id"));
    $.when(obj.trigger("mouseover").trigger("click").trigger("mouseout"))
        .then(function () {
            console.log("Changing Result Value" + $("#textTag").text());
        });
}

有没有办法按顺序链接这些事件，即
只有当第一个元素的触发动作完成时，才应该触发第二个元素的事件。我尝试搜索 SO，但大多数文章都围绕仅触发单个事件。谢谢

【问题讨论】：

我猜 jQuery 的 .trigger() 没有返回一个承诺，即使它返回了，也无法知道事件处理程序何时完成，因为你可以在那里放任何东西，并且没有回调？
我还没有放任何回调。在谷歌上搜索，发现这种功能更接近于运行自动化测试用例。由于约束，我将不得不通过 jquery 运行。这必须在第三方网站上运行，所以我不能保证事件句柄的 impl 中的回调

标签： javascript jquery jquery-callback

【解决方案1】：

为链的每一部分创建 $.Deferred 对象，然后绑定它们以在事件实际触发时解析：

callbacks = [$.Deferred(), $.Deferred(), $.Deferred()];
obj.on('mouseover', callbacks[0].resolve);
obj.on('click', callbacks[1].resolve);
obj.on('mouseout', callbacks[2].resolve);
$.when(callbacks).done(function() { console.log('all three have fired'); });

您需要额外的逻辑来确保订单被保留——如果在鼠标移出之前未触发点击，则可能使用“拒绝”。

【讨论】：