事件侦听器完成后调用函数 - Javascript

问题描述

在 Javascript 中，有没有办法在 EventListener 完成运行任何附加代码时调用函数?我正在使用一个使用 EventListener 的外部库，当调用 Listener 时，它会执行某个操作.我需要在外部库的代码运行完毕后运行我的函数.

In Javascript, is there a way to call a function when an EventListener has completed running any attached code? I am using an external library that uses an EventListener, and when the Listener is called, it performs a certain action. I need to run my function after the external library's code finishes running.

我想我本质上要求的是一种 EventListener，我可以将它放在 EventListener 上，以查看 EventListener> 已完成任务.

I guess what I'm essentially asking for is a sort of EventListener that I can place on an EventListener, to see when an EventListener has completed its task.

我无法获取源代码并将其放入我自己的文件中，并且我也无法将我的函数调用直接放在他们代码中外部库的 EventListenerHandler 的末尾.我也不启动 Event 或 EventListener，所以我不认为我可以在它上面放置回调函数(我还是 Javascript 的新手，所以也许，我不完全确定).该事件不使用 AJAX.

I am not able to take the source code and put it in my own file, and I am also unable to directly place my function call at the end of the external library's EventListenerHandler in their code. I also do not initiate the Event or the EventListener, so I don't think I can place a callback function on it (I'm still new to Javascript so maybe, I'm not entirely sure). The event does not use AJAX.

EventListener --> EventListener --> Event

如何做到这一点?

这是我的 EventListeners 的图片.在我的特定情况下，我想在外部库使用 has_many_add:after EventListener 捕获 Event 后执行以下代码段，并且完成运行相关处理程序中的代码:

Here is a picture of my EventListeners. In my specific case, I want to execute the following piece of code after the External Library catches the Event with the has_many_add:after EventListener, and finishes running the code in the associated Handler :

$('select.user_select').select2({
  minimumInputLength: 2
})

外部库在按钮被点击时执行回调:

The external library performs a callback when the button is clicked:

$(document).on('click', 'a.button.has_many_add', function(e) {
  var before_add, fieldset, html, index, parent, regex;
  e.preventDefault();
  parent = $(this).closest('.has_many_container');
  parent.trigger(before_add = $.Event('has_many_add:before'), [parent]);
  if (!before_add.isDefaultPrevented()) {
    index = parent.data('has_many_index') || parent.children('fieldset').length - 1;
    parent.data({
      has_many_index: ++index
    });
    regex = new RegExp($(this).data('placeholder'), 'g');
    html = $(this).data('html').replace(regex, index);
    fieldset = $(html).insertBefore(this);
    recompute_positions(parent);
    return parent.trigger('has_many_add:after', [fieldset, parent]);
  }
});

我无法更改此代码，并且我需要我的函数在调用 has_many_add:after EventListener 之后运行.我尝试使用:

I can't change this code, and I need my function to go after this call to has_many_add:after EventListener. I tried using:

$(".button has_many_add").click(function(){
  $('select.user_select').select2({
    minimumInputLength: 2
  });
});

这段代码似乎在外部库的事件处理程序执行之前执行.

This code seems to execute before the external library's event handlers do though.

推荐答案

只要您的外部库不阻止事件冒泡，您就应该能够这样做:

As long as your external library doesn't stop the event from bubbling you should be able to do this:

$(document).on('has_many_add:after', function(){
    //do your stuff
});

这篇关于事件侦听器完成后调用函数 - Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！