如何让JQuery等待上一个事件触发

How do you get JQuery to wait until a previous event has fired

本文关键字：事件 上一个 等待 JQuery      更新时间：2023-09-26

我有一个div列表，每当我点击它们时，我都会调用一个函数，一些函数会触发其他ajax函数。现在，虽然单击甚至会触发一个ajax事件，但如果我单击另一个div，我会得到调用的最后一个单击div函数。如何解决这个问题。

document.addEventListener("click",function(event){
                checkparent(event);
    } 
function checkpaternt(event){
    if(($(event.target).class=="checkparent"){//call ajax functions
    }
    else {//call local functions}

稍后我检查目标的类名，并调用不同的函数。更多信息（有很多div元素和if-else语句）非常感谢。

使用布尔标志：（并修复代码）

function checkparent(event) {
    if (ajaxRequestOn) return;
    if (event.target.className == "checkparent") {
        ajaxRequestOn = true;
        //call ajax functions
        $.ajax( /* ...*/ ).always(function () {
            ajaxRequestOn = false;
        });
    } else {
        //call local functions
    }
}

我认为下面的例子可能会对您有所帮助。

callbacks = [$.Deferred(), $.Deferred()];
    obj1.on('click', callbacks[0].resolve);
    obj2.on('click', callbacks[1].resolve);
    $.when(callbacks).done(function() { console.log('After to events done'); });

这里我正在创建两个延迟对象。

每个事件解析一个延迟对象。

当这些所有延迟的对象将在下一个函数中被解析时，您可以在.done() 中写入

我认为element.type会帮助你，

HTML

<input type="text" id="tipo-imovel" />

脚本

$("#tipo-imovel").on("click change", function(event){
    alert(event.type + " is fired");
});

此代码将提醒触发了哪个事件

我建议你看看这个可能的事件

请告诉我它是否对您有帮助

这可能会有所帮助：jQuery队列。请继续下面的相关报价：

如何在此处使用jQuery队列

工作示例

这是一个关于使用队列进行自定义ajax调用的惊人资源。我知道SO对存档链接内容的偏好，但我真的不能在这里复制代码，所以我还做了一个显示自定义队列的小把戏——这里是

该示例使用文本颜色更改，但可以很容易地进行任何AJAX调用。setTimeout有一个类似于许多AJAX调用的异步回调，这个fiddle应该是一个有用的模板。。。

理论

$('#elementId').click(function (e) {
  var $element = $(e.currenttarget);
  $element.queue('myqueue', function () {
    var $el = $(this);
    //Do stuff on $el
    //Remove this event from the queue and process next...
    $el.dequeue();
  });
});

细分：

  1. 收听点击事件
  2. 单击特定元素
  3. 在此元素的"myqueue"上对函数进行排队
  4. 要排队的函数可能需要对该元素的引用——幸运的是，jQuery使用所需的元素作为"this"指针来调用它

如果你希望两个事件之间有一个间隔，你甚至可以把出列放在一个超时内，比如window.setTimeout(500, function () { $this.dequeue(); });，它在下一个事件之前设置500毫秒的间隔。。。

jQuery队列文档

此功能类似于使用animation方法，但不需要在执行动画的时间。

$( "#foo" ).slideUp(); $( "#foo" ).queue(function() {  
  alert( "Animation complete." );   
  $( this ).dequeue(); 
});

这相当于：

$( "#foo" ).slideUp(function() {   
  alert( "Animation complete."
); });

请注意，当使用.requeue（）添加函数时，我们应该确保最终调用.dequeue（），以便下一个函数行中执行。

更新答案已被修改，包括一个工作小提琴和一些解释。

相关文章：