Question

在我的代码中，我尝试设计一个产品开发页面，其中在页面上发生多个javascript事件。我已经定义了一个名为initEvents（）的函数，它执行任何第一个事件。然后它再次调用自身（递归地）为执行任何第二个事件做好准备，依此类推。问题是浏览器在几个事件发生后性能和滞后性都非常慢。由于javascript是单线程语言，有什么方法可以改进我的代码以获得多线程浏览器响应？提前致谢。

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

你可以看到我定义了一个函数initEvents（），它执行onclick或mousemove事件中的任何一个。之后，我再次以递归方式调用函数initEvents（），使其准备好执行第二次onclick或mousemove事件，依此类推。在几个事件之后，浏览器的响应速度变得非常缓慢且滞后。

Javascript调用事件函数递归地使浏览器性能变慢

0 个答案: