Make run javascript function just once

Question

I'm trying to make run this script on my website. It triggers an alert when id in viewport. the problem is that the alert keeps running while id in the viewport. can't make it run just one time. How could i do this?

function inViewport( element ){
  // Get the elements position relative to the viewport
  var bb = element.getBoundingClientRect();
  // Check if the element is outside the viewport
  // Then invert the returned value because you want to know the opposite
  return !(bb.top > innerHeight || bb.bottom < 0);
}

var myElement = document.querySelector( 'holaTest' );
// Listen for the scroll event
document.addEventListener( 'scroll', event => {
  // Check the viewport status
  if( inViewport( myElement ) ){
        alert('hello there')
  }
})

André Morais · Accepted Answer · 2020-04-30 17:51:34Z

1

you can do this: add a Boolean variable that controls the first time

var bool=true;
function inViewport( element ){
  // Get the elements position relative to the viewport
  var bb = element.getBoundingClientRect();
  // Check if the element is outside the viewport
  // Then invert the returned value because you want to know the opposite
  return !(bb.top > innerHeight || bb.bottom < 0);
}

var myElement = document.querySelector( 'holaTest' );
// Listen for the scroll event
document.addEventListener( 'scroll', event => {
  // Check the viewport status
  if( inViewport( myElement ) && bool){
    bool=false;
    alert('hello there')
  }
})

answered Apr 30, 2020 at 17:51

André Morais

635 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tony M · Accepted Answer · 2020-04-30 18:00:51Z

Adding to Andre's answer, you can check alert only once when it's on the viewport. That way, it alerts once but every time the element is in viewport:

function inViewport( element ){
  // Get the elements position relative to the viewport
  var bb = element.getBoundingClientRect();
  // Check if the element is outside the viewport
  // Then invert the returned value because you want to know the opposite
  return !(bb.top > innerHeight || bb.bottom < 0);
}

var myElement = document.querySelector( '.holaTest' );
// Listen for the scroll event
var t = true;
document.addEventListener( 'scroll', event => {
  // Check the viewport status
  if( inViewport( myElement ) && t){
        alert('hello there');
        console.log("try");
        t = false;
  } 
  if (!inViewport(myElement)) {	
  	t = true;
  }
})

Collectives™ on Stack Overflow

Make run javascript function just once

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related