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

时间:2013-06-15 14:04:04

标签: javascript jquery jquery-callback

我是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,但大多数文章围绕触发仅单个事件。 感谢

1 个答案:

答案 0 :(得分:0)

为链的每个部分创建$ .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之前没有触发点击,可能会使用'reject'。