JAVASCRIPT: how to make a function only execute once per second?

[QQ_cazo]

function setheight() {
        var a = document.getElementById('scroll-page');
        a.style.maxHeight = window.innerHeight - document.getElementById("nav").offsetHeight - (document.getElementById('nav2').offsetHeight + 3) - (document.body.querySelector('.fw-bolder').offsetHeight /2) + 'px';
        //a.style.maxHeight = screen.height + 'px';
        a.style.overflowY = 'scroll';
        a.style.overflowX = 'hidden';
        console.log(a.style.maxHeight)
      }
window.addEventListener('resize', setheight);
window.addEventListener('load',setheight)

 

my goal: make this function only run of a max of 1 per second (not every single time the screen is resized).

 

 

But, i dont want the script running forever, only when the screen is changed

[mariushm]

Use a variable outside that function in which you store the time of the last activity.  For example, you could use getTime() which gives you the milliseconds since 1st of Jan 1970.

 

Each time the function is called, get the time, if the difference between the read value and the previous reading is less than 1000, that means less than 1s has passed and you can just abort the function.

 

This aside ... you could probably do what you're trying to accomplish with some CSS rules, see media queries :  https://www.cssmine.com/ebook/css3-media-queries

 

[shadow_ray]

Update a timestamp every time the function runs and exit the function if the current time minus last execution is smaller than 1s.

 

Something like this.

var last_execution = 0;

function setheight() {
	let current_time = Date.now();
  	if(current_time - last_execution < 1000)
  	return;
  
  	last_execution = current_time;   	
	// do stuff here
}

 

[QQ_cazo]

3 minutes ago, mariushm said:

Use a variable outside that function in which you store the time of the last activity.  For example, you could use getTime() which gives you the milliseconds since 1st of Jan 1970.

 

Each time the function is called, get the time, if the difference between the read value and the previous reading is less than 1000, that means less than 1s has passed and you can just abort the function.

 

This aside ... you could probably do what you're trying to accomplish with some CSS rules, see media queries :  https://www.cssmine.com/ebook/css3-media-queries

 

well, my goal is to make a "scrolling div", like kinda how on the reddit app, you can keep scrolling forerver yet the NAV and other stuff stays put

[bullipatty]

On 12/25/2021 at 11:51 AM, QQ_cazo said:

well, my goal is to make a "scrolling div", like kinda how on the reddit app, you can keep scrolling forerver yet the NAV and other stuff stays put

 

What has making a function only execute once per second to do with endless scrolling?

Maybe this will help you: How To Ask

 

[Ominous]

On 12/25/2021 at 10:51 AM, QQ_cazo said:

well, my goal is to make a "scrolling div", like kinda how on the reddit app, you can keep scrolling forerver yet the NAV and other stuff stays put

You can make it stay using the position CSS attribute: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp