Redundant events in your javaScript

Question

I have written multiple functions in jQuery.

My client is saying, there are currently redundant events in your JavaScript. Please consolidate all the code that should occur within a single event.

I am still learning jQuery. Please help.

Thanks.

'use strict';

$(function() {
 $( '.task-list' ).on( 'click', 'li.list', function() {
  $(this).toggleClass('completed' );
 });
});

$(function() {
 setTimeout(function(){
  $('body').addClass('loaded');
 }, 3000);
});

$(function() {
 $('[data-toggle="tooltip"]').tooltip();
 $('[data-toggle="popover"]').popover();
});

$(function(){
 $('.nav li.dropdown').hover(function() {
  $(this).addClass('open');
 }, function() {
  $(this).removeClass('open');
 });
});

Don’t forget to accept an answer if it was clear enough for you, or ask for details in comments — Ulysse BN, Jan 23 '17 at 07:27

Juned Lanja · Answer 1 · 2017-01-23T04:50:59.197

2

I think you should bind all the events within document.ready event.

As saild on jquery's official site :

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

So do something like this :

$( document ).ready(function() {
    //your code goes here 
    //bind the all events and do other stuff
});

or 

$(function(){
    //your code goes here 
    //bind the all events and do other stuff
});

Don't repeat it multiple times.

edited Jan 23 '17 at 04:50

answered Jan 23 '17 at 04:42

Juned Lanja

1,466
10
21

`$(function(){}) ` is same thing...read the docs more thoroughly yourself – charlietfl Jan 23 '17 at 04:43
Yes, its same thing. But you don't need to use it again and again. – Juned Lanja Jan 23 '17 at 04:44
What does that have to do with how you answered? Answer is still misleading – charlietfl Jan 23 '17 at 04:46
he has used $(function(){ ... }) multiple time to bind events to different DOM element. while its just required only one time – Juned Lanja Jan 23 '17 at 04:48
Doesn't say anything about that in the answer....answer implies that OP code is wrong , but it is not. Agree can be managed inside one ready handler but can also have numerous ones – charlietfl Jan 23 '17 at 04:49
My client is saying, there are currently redundant events in your JavaScript. Please consolidate all the code that should occur within a single event. that is what he is asking – Juned Lanja Jan 23 '17 at 04:57
1

But that is not what was answered....you answered stating to use `document.ready` which is already being used.. – charlietfl Jan 23 '17 at 05:03

score 2 · Answer 2 · edited May 23 '17 at 11:45

try:

'use strict';

$(function() {
    $( '.task-list' ).on( 'click', 'li.list', function() {
        $(this).toggleClass('completed' );
    });

    setTimeout(function(){
        $('body').addClass('loaded');
    }, 3000);

    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="popover"]').popover();

    $('.nav li.dropdown').hover(function() {
        $(this).addClass('open');
    }, function() {
        $(this).removeClass('open');
    });
});

the $(function() {...}) you are using is in fact a short-hand for $(document).ready(function() {...}). This method allows you to check if your document is fully loaded before applying jquery. Doing it for each block of your code means that each time you add a new listener, which is not what you want. More on multiple call to this function here.

See more about this function on JQuery documentation

Redundant events in your javaScript

2 Answers2