Question 305445 in Javascript Question posted in
A very good W3school tutorial can be found here.

Condition when a sequence of conditions within a Javascript forEach() method is not met

My IntersectionObserver uses a forEach method to call some functions if a condition is met per each item of an array:

  const sections = document.querySelectorAll("section")

  function removeHighlight(id) {
    someElementArray[id].classList.remove('highlight')
  }

  function addHighlight(id) {
    someElementArray[id].classList.add('highlight')
  }

  function onObserve(entries, observer) {
    entries.forEach((entry) => {
       if (entry.isIntersecting) {
          const { id } = entry.target
          removeHighlight(selectedId)
          addHighlight(id)
          selectedId = id
       }
    })
  }

  const observer = new IntersectionObserver(onObserve, options)
  sections.forEach((section) => {
      observer.observe(section)
   })

Is there logic I can use in the onObserve callback for when this condition is not met for any of the array items? As in:

  function onObserve(entries, observer) {
    entries.forEach((entry) => {
       if (entry.isIntersecting) {
          const { id } = entry.target
          removeHighlight(selectedId)
          addHighlight(id)
          selectedId = id
       }
    })
    // otherwise, if none of the items meet the condition
    // do something else
  }
Tags:

2

Answers


  1. 0

    You can check if none of the items meet the condition by using the ‘every‘ method on the array of entries. The every method tests whether all elements in the array pass the provided function. If any entry is not intersecting, you can execute a specific logic. Here’s how you can modify your onObserve function:

    function onObserve(entries, observer) {
  const isAnyIntersecting = entries.some(entry => entry.isIntersecting);

  if (isAnyIntersecting) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const { id } = entry.target;
        removeHighlight(selectedId);
        addHighlight(id);
        selectedId = id;
      }
    });
  } else {
    // If none of the items meet the condition
    // Do something else
  }
}

    In the example above, the ‘some’ method is used to check if at least one entry is intersecting. If isAnyIntersecting is true, it means at least one item meets the condition, and the logic inside the if block is executed. If it’s false, the logic inside the else block is executed, indicating that none of the items meet the condition.

    Login or Signup to reply.
  2. 0

    You can try something like this:

    function onObserve(entries, observer) {
    const allEntriesIntersecting = entries.every((entry) => entry.isIntersecting);

    if (allEntriesIntersecting) {
        entries.forEach((entry) => {
            const { id } = entry.target;
            removeHighlight(selectedId);
            addHighlight(id);
            selectedId = id;
        });
    } else {
        // do something else when not all entries meet the condition
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search