Jquery觸發器以編程方式觸發事件並等待上一個事件的操作完成以觸發下一個事件

Question

我是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，但大多數文章圍繞觸發僅單個事件。 謝謝

Answer 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'); });

您需要其他邏輯來確保保留訂單 - 如果在mouseout之前未觸發click，則可能使用'reject'。