事件侦听器完成后调用函数 - Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31864143/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Call Function After Event Listener Completes - Javascript
提问by Shwinn
In Javascript, is there a way to call a function when an EventListenerhas 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.
在 Javascript 中，有没有办法在EventListener完成运行任何附加代码后调用函数？我正在使用一个使用 的外部库，EventListener当调用 Listener 时，它会执行某个操作。我需要在外部库的代码运行完毕后运行我的函数。
I guess what I'm essentially asking for is a sort of EventListenerthat I can place on an EventListener, to see when an EventListenerhas completed its task.
我想我本质上要求的是一种EventListener我可以放在EventListener, 以查看何时EventListener完成其任务的内容。
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 EventListenerHandlerin their code. I also do not initiate the Eventor 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.
我无法获取源代码并将其放入我自己的文件中，而且我也无法直接将我的函数调用EventListenerHandler放在他们代码中外部库的末尾。我也不启动Event或EventListener，所以我不认为我可以在它上面放置回调函数（我还是 Javascript 的新手，所以也许，我不完全确定）。该事件不使用 AJAX。
EventListener--> EventListener--> Event
EventListener--> EventListener-->Event
How can this be done ?
如何才能做到这一点 ？
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 Eventwith the has_many_add:afterEventListener, and finishes running the code in the associated Handler :
这是我的 EventListeners 的图片。在我的特定情况下，我想外部库捕捉后执行下面的代码段Event与has_many_add:afterEventListener和运行的相关处理程序的代码完成：
$('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]);
}
});
I can't change this code, and I need my function to go after this call to has_many_add:afterEventListener. I tried using:
我无法更改此代码，并且我需要我的函数在调用has_many_add:afterEventListener. 我尝试使用：
$(".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.
这段代码似乎在外部库的事件处理程序执行之前执行。
采纳答案by Johan Karlsson
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
});
回答by Shain Lafazan
This is a really common thing, especially in jQuery. Most jQuery functions actually support this through callbacks.
这是很常见的事情，尤其是在 jQuery 中。大多数 jQuery 函数实际上通过回调支持这一点。
Here's an example:
下面是一个例子：
$(document).on('click', 'div', function() {
console.log("a div got clicked, so naturally we're running cool stuff when it completes");
});
In that example, the console.log and everything between those callback braces will run only when a div is clicked on your document.
在那个例子中，console.log 和那些回调大括号之间的所有东西只会在你的文档上点击一个 div 时运行。
You can also define a function outside of this listener, then call it from inside when the callback is triggered:
您还可以在此侦听器之外定义一个函数，然后在触发回调时从内部调用它：
function myFunction (){
console.log("doing more stuff after the event listener is triggered");
});
$(document).on('click', 'div', function() {
console.log("a div got clicked, so naturally we're running cool stuff when it completes");
myFunction(); // invokes our other function
});
