Javascript calling event functions recursively making browser performance slow

Question

Here, in my code, I have tried to design a product development page where multiple javascript events happens across the page. I have defined a function called initEvents() which executes any first event. It then again calls itself (recursively) to get ready for executing any second event and so on. Problem is the browser is getting highly slow in performance and laggy after few events takes place. Since javascript is a single threaded language, is there any way I can improve my code to attain the multi threaded browser responsiveness? Thanks in advance.

function initEvents () {

          $('.sku').on("click",function(){
            $('.selected').removeClass('selected');
            $(this).addClass('selected');
            var template1 = $("#temp1").html();
            var renderer1 = Handlebars.compile(template1);
            var sku_attr = $(this).attr("data-id");
            function get(k) {
                return map[k];
            }
            var x = renderer1(get(sku_attr)[0].skuImageSet);
            $("#thumb").html(x);  //rendered thumbnails on sku click

            $(".hero").attr("src", get(sku_attr)[0].skuImageSet[0].mediumImage); //rendering the default hero image on sku click
            $(".hero").attr("data-id", get(sku_attr)[0].skuImageSet[0].id); //passing the default hero image id on sku click

            var template4 = $("#temp4").html();
            var renderer4 = Handlebars.compile(template4);
            var w = renderer4(get(sku_attr)[0]);
            $("#display").html(w);  //rendered heading section of sku's on sku click

            var template5 = $("#temp5").html();
            var renderer5 = Handlebars.compile(template5);
            var v = renderer5(get(sku_attr)[0]);
            $("#desc").html(v);   //rendered body section of sku's on sku click

            setTimeout(initEvents, 0);

          });   //sku click

          $('.th').on("click",function(){
            // $('.select').removeClass('select');
            // $(this).addClass('select');
            var template3 = $("#temp3").html();
            var renderer3 = Handlebars.compile(template3);
            var th_attr = $(this).attr("data-id");
            function get(k) {
                return map[k];
            }
            var z = renderer3(get(th_attr)[1]);
            $("#hero").html(z);   //rendering each hero image on thumb clicks of each sku
            initEvents();

          });   //thumb click

          $( ".hero" ).on("mousemove", floatHero);
          //positioning the large hero image

          $(".hero").on("mouseleave", function( evt ) {
              $(".hero").off("mousemove", floatHero);
              $("#box").css({"display": 'none'});
              $(".affect").css({"display": 'none'});

              initEvents();
          });   //remove float hero on mouseleave

          function floatHero( event ) {
            var template6 = $("#temp6").html();
            var renderer6 = Handlebars.compile(template6);
            var hero_attr = $(this).attr("data-id");
            function get(k) {
                return map[k];
            }
            var u = renderer6(get(hero_attr)[1]);
            $("#box").html(u);    //rendering large hero image on mousemoving on each generated hero image for a sku

            var x = event.pageX - $('.hero').offset().left;
            var y = event.pageY - $('.hero').offset().top;
            var xPercent = x/$('.hero').width();
            var yPercent = y/$('.hero').height();
            // console.log(xPercent + ", " + yPercent);
            $("#box").css({"display": 'block'});
            $(".affect").css({"display": 'block'});
            $(".affect").css({"left" : 225-($('.affect').width() * xPercent), "top" : 375-($('.affect').height() * yPercent)});

          }  //floatHero

}   //initEvents

You can see I have defined a function initEvents() which executes any one of the onclick or mousemove event. After that, I again call the function initEvents() recursively to make it ready for executing the second time onclick or mousemove event and so on. After few events, the browser responsiveness becomes extremely slow and laggy.

I have only one question: WHY? 1. setTimeout,0 - not a great idea. 2. adding onclick event handlers to the same elements every click - not a great idea. 3. calling a function on every click of the object that already have event handlers, not a great idea. Change `function initEvents () {` to `$(function() {` and remove all other initievent calls — mplungjan, Sep 18 '16 at 06:21
events are not "one-shot" - you add an event listener, it listens for ALL such events — Jaromanda X, Sep 18 '16 at 06:23
`every 0th milliseconds` - it's not a `setInterval` :p it only adds the events again once an event fires — Jaromanda X, Sep 18 '16 at 06:24
I have used initEvents() because i am doing an ajax call before these events which is not letting these events to occur by writing them inside '$(function() {'. That's why I needed to fire an explicit function like this as stated above. @mplungjan — Amit Baran Roy, Sep 18 '16 at 06:34
Why not add the ajax call to the clicks instead of the init call? Or is it because you have not seen how jQuery can [delegate](http://stackoverflow.com/questions/13767919/jquery-event-wont-fire-after-ajax-call)? — mplungjan, Sep 18 '16 at 06:36
Oh man, this was exactly what was needed. Thanks a lot. It's working now. :-) — Amit Baran Roy, Sep 18 '16 at 07:03

Javascript calling event functions recursively making browser performance slow

0 Answers0