在JavaScript中将函数作为函数参数传递

huangapple go评论56阅读模式
英文:

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中的isObservedisNotObserved函数。

以下是工作的代码,但只调用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')
)

huangapple
  • 本文由 发表于 2023年2月24日 03:00:50
  • 转载请务必保留本文链接:https://go.coder-hub.com/75549218.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定