How to combine multiple jquery functions

Question

If you view the jquery code below you will see the famous $(document).ready(function(){ that starts the script off. I see this on pretty much all jquery code examples on the net and I am wanting to know, if I am running 5 different code functions in a single file do I need to use $(document).ready(function(){ at the beginning of all of them?

If not how would I combine for example this code below into a page 3 times, pretend it is 3 different codes?

<script type="text/javascript" >
 $(document).ready(function(){
  setTimeout(function(){
  $(".flash").fadeOut("slow", function () {
  $(".flash").remove();
      }); }, 2000);
 });
</script>

Answer 1

You should try not to put too much inside the doc ready blocks. Yes you can have multiples of them however I stick to one if any. You can also put your script just before the closing body tag without the need for document ready.

I advise breaking the code into separate functions. That way you can reuse them throughout your page at various stages. Then just use the doc ready block to trigger a call to that pages init function.

You can also use $(function(){}); as a shorcut to $(document).ready(function(){});

<script type="text/javascript" >
 $(function(){
    init();
 });

 function init(){
   someFunction();
   //other init stuff
 }

 function someFunction(){
  setTimeout(function(){
     $(".flash").fadeOut("slow", function () {
     $(".flash").remove();
   }); }, 2000);

 }
</script>

Answer 2

I think the original poster was asking if he must do this:

<script>
 $(document).ready(function(){
        func1();
});
</script>
<script>
 $(document).ready(function(){
        func2();
});
</script>

Or if he can just do this:

<script>
 $(document).ready(function(){
      func1();
      func2();
});
</script>

In the later example, there is one script and one document ready statement. Much cleaner. I believe the answer is yes, you can do the later without any problem.

Answer 3

The problem is that you don't understand what the ready event is and why you need it.

Imagine that a page has not yet loaded fully and you try to change something on it with some javascript and since the code for that HTML element you are trying to manipulate is not even loaded yet, things go bad.

The ready event solves this problem. Any function (most often a single anonymous function) that you bind to the ready event gets executed as soon as all elements in the document are ready to be traversed and manipulated. It's considered bad practice to have any inline javascript. If you want an event(click,hover,etc) to work on your page, you should call it inside the $(document).ready() function.

And since a page only gets loaded once, any function that is bound to the ready event will only get called once. So there isn't much sense in binding multiple functions to the ready event. You can do everything in that one function that you bind to it. However it will cause no harm (as long as you understand what you are doing) since every function that you have bound to the ready event will be called once the DOM is ready.

I don't understand what you are trying to achieve by running that same piece of code five times... so I can't help you with that.

I hope that this explanation helps you solve your actual problem.