I'm wondering how to run a function when another function is called. addEventListener
only runs events like "click", "mouseover", etc. However, I'd like to listen for a function call.
EXAMPLE:
Function 1 is called. Afterwards, Function 2 runs because it saw that Function 1 was called.
Is there an addEventListener alternative for simple functions and not events? I can't seem to find any.
My goal was to simply run a function everytime a user did something like call for when something was hidden in jQuery or by another JavaScript library or just simply another external JavaScript file with some code I added in.
我想知道如何在调用另一个函数时运行一个函数。 addEventListener只运行“click”,“mouseover”等事件。但是,我想听一个函数调用。示例:调用函数1。之后,函数2运行,因为它看到函数1被调用。对于简单函数而不是事件,是否有addEventListener替代方法?我似乎找不到任何东西。我的目标是每次用户执行某些操作时简单地运行一个函数,例如在jQuery或其他JavaScript库中隐藏某些内容时,或者只是添加了一些代码的其他外部JavaScript文件。
3 个解决方案
#1
2
You will have trigger an event inside myFunction
and listen to that event.
你将在myFunction中触发一个事件并听取那个事件。
function myFunction(){
//This is the main function
alert('Hello, this is part of the message!');
// trigger the event
var event = new CustomEvent("event", { "detail": "Example of an event" });
document.dispatchEvent(event);
}
// handle here;
document.addEventListener("event", function(){
//This is the secondary function
//or the function I need to run after the main function is called
alert('Hello, this is the other part of the message!');
});
// call main
myFunction();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Simple test!</p>
<p>Long story short, you get message 1, but message 2 never pops up!</p>
#2
2
Introducing a very hacky way
介绍一种非常黑客的方式
Since what you are trying to achieve is basically hacking some existing system (you shouldn't run into this problem if you have control over both sides and design your code properly).
因为你想要实现的目的基本上是攻击一些现有的系统(如果你能控制双方并正确设计你的代码,你不应该遇到这个问题)。
It looks like your function is declared globally as well. In that case: 1. store the existing function in a variable 2. overwrite that function with your implementation 3. call the function variable at the start
看起来您的函数也是全局声明的。在这种情况下:1。将现有函数存储在变量中2.用您的实现覆盖该函数3.在开始时调用函数变量
function myFunction(){
//This is the main function
alert('Hello, this is part of the message!');
}
var tempfunc = myFunction;
window.myFunction = function() {
tempfunc();
// do what you need to do in the event listener here
alert('Hello, this is the other part of the message!');
}
EDIT:
编辑:
The original question had the requirement that the original function cannot be modified, hence my solution. Since they it appears the question has changed.
最初的问题要求原始功能不能被修改,因此我的解决方案。因为它们似乎已经改变了。
#3
0
Is there an addEventListener alternative for simple functions and not events? I can't seem to find any.
对于简单函数而不是事件,是否有addEventListener替代方法?我似乎找不到任何东西。
My goal was to simply run a function everytime a user did something like call for when something was hidden in jQuery or by another JavaScript library or just simply another external JavaScript file with some code I added in.
我的目标是每次用户执行某些操作时简单地运行一个函数,例如在jQuery或其他JavaScript库中隐藏某些内容时,或者只是添加了一些代码的其他外部JavaScript文件。
You can use jQuery.Callbacks()
你可以使用jQuery.Callbacks()
var callbacks = $.Callbacks();
function handleCallback1(message) {
console.log(message, this)
};
function handleCallback2(message) {
if (this.tagName === "DIV") {
this.style.color = "green";
} else {
this.nextElementSibling.style.color = "blue";
}
};
$("button, div").on("click", function() {
callbacks.fireWith(this, ["called from " + this.tagName])
});
callbacks.add(handleCallback1, handleCallback2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<button>click</button>
<div>click</div>
#1
2
You will have trigger an event inside myFunction
and listen to that event.
你将在myFunction中触发一个事件并听取那个事件。
function myFunction(){
//This is the main function
alert('Hello, this is part of the message!');
// trigger the event
var event = new CustomEvent("event", { "detail": "Example of an event" });
document.dispatchEvent(event);
}
// handle here;
document.addEventListener("event", function(){
//This is the secondary function
//or the function I need to run after the main function is called
alert('Hello, this is the other part of the message!');
});
// call main
myFunction();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Simple test!</p>
<p>Long story short, you get message 1, but message 2 never pops up!</p>
#2
2
Introducing a very hacky way
介绍一种非常黑客的方式
Since what you are trying to achieve is basically hacking some existing system (you shouldn't run into this problem if you have control over both sides and design your code properly).
因为你想要实现的目的基本上是攻击一些现有的系统(如果你能控制双方并正确设计你的代码,你不应该遇到这个问题)。
It looks like your function is declared globally as well. In that case: 1. store the existing function in a variable 2. overwrite that function with your implementation 3. call the function variable at the start
看起来您的函数也是全局声明的。在这种情况下:1。将现有函数存储在变量中2.用您的实现覆盖该函数3.在开始时调用函数变量
function myFunction(){
//This is the main function
alert('Hello, this is part of the message!');
}
var tempfunc = myFunction;
window.myFunction = function() {
tempfunc();
// do what you need to do in the event listener here
alert('Hello, this is the other part of the message!');
}
EDIT:
编辑:
The original question had the requirement that the original function cannot be modified, hence my solution. Since they it appears the question has changed.
最初的问题要求原始功能不能被修改,因此我的解决方案。因为它们似乎已经改变了。
#3
0
Is there an addEventListener alternative for simple functions and not events? I can't seem to find any.
对于简单函数而不是事件,是否有addEventListener替代方法?我似乎找不到任何东西。
My goal was to simply run a function everytime a user did something like call for when something was hidden in jQuery or by another JavaScript library or just simply another external JavaScript file with some code I added in.
我的目标是每次用户执行某些操作时简单地运行一个函数,例如在jQuery或其他JavaScript库中隐藏某些内容时,或者只是添加了一些代码的其他外部JavaScript文件。
You can use jQuery.Callbacks()
你可以使用jQuery.Callbacks()
var callbacks = $.Callbacks();
function handleCallback1(message) {
console.log(message, this)
};
function handleCallback2(message) {
if (this.tagName === "DIV") {
this.style.color = "green";
} else {
this.nextElementSibling.style.color = "blue";
}
};
$("button, div").on("click", function() {
callbacks.fireWith(this, ["called from " + this.tagName])
});
callbacks.add(handleCallback1, handleCallback2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<button>click</button>
<div>click</div>