英文:
Passing functions as function parameters in JavaScript
问题
我正在尝试通过observeElement
函数的参数来更改在handleIntersect
函数的if-else条件中调用的函数,代码如下:
window.addEventListener("load", (event) => {
observeElement('.menu-nav-area', first function to call, second function to call);
observeElement('.menu-quick-area', third function to call, fourth function to call);
}, false);
无法弄清楚如何将这些参数传递为函数,以便它们代替handleIntersect
中的isObserved
和isNotObserved
函数。
以下是工作的代码,但只调用handleIntersect
中指定的函数:
window.addEventListener("load", (event) => {
observeElement('.menu-nav-area');
}, false);
function observeElement(element) {
let target = document.querySelectorAll(element);
let observer;
createObserver();
function createObserver() {
let options = {
root: null,
rootMargin: '0px',
threshold: 1.0
}
observer = new IntersectionObserver(handleIntersect, options);
target.forEach(function (k) {
observer.observe(k);
});
}
function handleIntersect(entries, observer) {
entries.forEach(entry => {
document.querySelectorAll(element).forEach(function (e) {
if (entry.intersectionRatio === 1) {
isObserved();
} else {
isNotObserved();
}
});
}
}
function isObserved() {
console.log('menu is up');
}
function isNotObserved() {
console.log('menu is down');
}
}
是否可以做到这一点?谢谢!
英文:
im trying to change functions that are called in if else condition of handleIntersect function through parameters of called observeElement function like this:
window.addEventListener("load", (event) => {
observeElement('.menu-nav-area', 1st funtion to call, 2nd function to call );
observeElement('.menu-quick-area', 3rd funtion to call, 4th function to call );
}, false);
Can't figure out how to pass these params as functions, so they are called instead isObserved and isNotObserved functions in handleIntersect.
Here is the code, that works, but calls only functions specified in handleIntersect:
window.addEventListener("load", (event) => {
observeElement('.menu-nav-area');
}, false);
function observeElement(element) {
let target = document.querySelectorAll(element);
let observer;
createObserver();
function createObserver() {
let options = {
root: null,
rootMargin: '0px',
threshold: 1.0
}
observer = new IntersectionObserver(handleIntersect, options);
target.forEach(function (k){
observer.observe(k);
});
}
function handleIntersect(entries, observer) {
entries.forEach(entry => {
document.querySelectorAll(element).forEach(function (e) {
if (entry.intersectionRatio === 1) {
isObserved();
} else {
isNotObserved();
}
});
});
}
function isObserved() {
console.log('menu is up');
}
function isNotObserved() {
console.log('menu is down');
}
}
Can it be done?
Thanks!
答案1
得分: 1
向 observeElement
函数添加另外两个参数:
function observeElement(element, isObserved, isNotObserved) {
// ...
// 直接调用这两个函数,如 isObserved() 和 isNotObserved()
}
然后调用该函数并将这两个回调函数作为参数传递:
// 可以使用常规的匿名函数表达式或箭头函数
// 也可以使用命名函数/变量
observeElement('.menu-nav-area', function(){
console.log('observed');
// 做一些操作...
}, () => {
console.log('not observed');
});
英文:
Add two more parameters to the observeElement
function:
function observeElement(element, isObserved, isNotObserved) {
// ...
// directly call the functions as isObserved() and isNotObserved()
}
Then call the function and pass those two callback functions as arguments:
// can use regular anonymous function expression or arrow function
// can also use named functions/variables
observeElement('.menu-nav-area', function(){
console.log('observed');
// do something...
}, () => {
console.log('not observed');
});
答案2
得分: 1
Functions can be passed like any other function argument.
function observeElement(element, isObserved, isNotObserved) {
//... other implementation here...
if (someCondition) {
isObserved()
} else {
isNotObserved()
}
}
Now you can call that function like so:
observeElement(
'.menu-nav-area',
() => console.log('observed'),
() => console.log('not observed')
)
英文:
Functions can be passed like any other function argument.
function observeElement(element, isObserved, isNotObserved) {
//... other implementation here...
if (someCondition) {
isObserved()
} else {
isNotObserved()
}
}
Now you can call that function like so:
observeElement(
'.menu-nav-area',
() => console.log('observed'),
() => console.log('not observed')
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论