Hi everyone i’m wanting to minimize the amount of scroll events in my document at the same time, currently i have a always on scroll event which is used to drop in a main menu when you scroll past the main header. But now i noticed that there is on some pages three scroll event’s so i thought there must be some way to create a function dynamically and then pass that function to the scroll event without wasting performance. (just tell me if this is not a problem and i’m over stressing myself about the performance)
The idea i had was that i would add the scroll event at the end of the doc (within the doc ready event) so that i can add all the scroll events that need to be in the page and then pass it to the scroll event.
What i have done so far
So i looked up how to create a function and then add on to it then use the same function name as the original and it looks something like this:
// Creating the original function
scroll = function(){
console.log('pass one is a go.');
}
// Creating a variable which is a reference of the old function
var prevScroll = scroll;
// Replacing the original function with the new one by using it's name
scroll = function(){
//creating a variable which calls the original function through the ref
var result = prevScroll.apply(this, arguments);
// New code would be here
console.log('pass two is done as well.');
// Return the original function
return result;
};
// Just calling it
scroll();
And this actually works as you would think (as the comments say) but there is one problem i’m facing with this solution, when i add another set of code then my call stack get’s exceeded straight away.
What i want to ask you all
Is this a really bad way to do it and if so what else can i do to use only one function in the scroll event?
If this is not a bad way of doing it what is causing my call stack to be exceeded, is it a recursive problem and what can i do about it?
What is the purpose for wanting to overtake the function in this way?
If it’s so that you can have another function that triggers for the event, there are much better ways of doing that.
The traditional event registration model only allows one function per element event, with fancy footwork as seen above to achieve much more.
With advanced event registration, you can use the addEventListener technique to easily add multiple functions to the event of an element. For example:
window.addEventListener("scroll", function (evt) {
console.log("pass one is a go.");
}, false);
window.addEventListener("scroll", function (evt) {
console.log("pass two is done as well.");
}, false);
Is that the problem that you are wanting to solve?
The reason why i did the above is for me to be able to use only one function on one scroll event that i set in jQuery.
In my Code i had something like this:
$(document).scroll(function(){
console.log('First');
});
// The following is page specific events which will only run if that page is
// the one you're on, this is to remove unwanted event on the page
if($page === 'home-page'){
$(document).scroll(function(){
console.log('second');
});
}
Now what i wanted to do is create a scroll event at the end of the document so that i only need to register one scroll event to the document to prevent performance problems. The goal i had with the code i have in my first post was to concatenate the functions together and then use it on the one scroll event at the end of the document to prevent the above code from registering unneeded event’s
One question i have is that if i create the above where there is two scroll event’s, will they automatically be concatenated together behind the sense?
To answer your question, yes i want to have multiple function on one event (which is the scroll event) without having unneeded amount of event’s registered on a page.
Web pages can easily handle thousands of events on the page. It seems that you are wanting to solve a problem that has so far failed to become one.
Normally we seek to make code easy to understand. Performance optimizations make the code more difficult to understand.
What performance problems are you wanting to prevent? Have you made any measurements? What are your results? Was any notable performance difference (> 50ms) even seen?
You will likely find that the performance difference is nil. Please don’t try to solve a problem before it’s actually become one. For as they say about premature optimization, 97% of the time premature optimization is the root of all evil.
I have not done any testing myself on this code but i think i am doing which you’re saying, premature optimization i’m not so failure with JavaScript and i don’t know how much a page can handle before actually feeling the effect of slow code, that’s why i’m asking these questions my apologize if they seem a bit silly, i’m just wanting to learn and go about doing my code properly
Thank you for your feed back and help it’s truly much appreciated, for now i will still do multiple event’s and if it ever happens that i get in to performance problems i will then try and sort things out
Have a wonderful day ahead, Best regards.
i’m wanting to minimize the amount of scroll events in my document at the same time, currently i have a always on scroll event which is used to drop in a main menu when you scroll past the main header. But now i noticed that there is on some pages three scroll event’s so i thought there must be some way to create a function dynamically and then pass that function to the scroll event without wasting performance. (just tell me if this is not a problem and i’m over stressing myself about the performance)
i’m not so failure with JavaScript and i don’t know how much a page can handle before actually feeling the effect of slow code, that’s why i’m asking these questions