javascript - 当我有很多动态生成的div标签时，$。on(“mouseenter”)落后于我的网站

我正在为我的学校做一个毕业网站。在每个选项卡上，我将ajax调用所有要显示的作品，一旦作品显示出来，我就得到一个函数

    $(".viewport-computer .img_thumb_holder").on({
        mouseenter: function () {
            //stuff to do on mouse enter
            $(this).find(".caption").stop().fadeTo('slow', 1);
        },
        mouseleave: function () {
            //stuff to do on mouse leave
            $(this).stop().fadeTo('slow', 1);
            $(".caption").stop().fadeTo('slow', 0);
            $(".viewport-computer .img_thumb_holder .img_thumb").stop().fadeTo(1, 1);
            $(".viewport-computer .img_thumb").hide();
        }
    });

它允许我将鼠标悬停在作品上并显示所显示作品的name和caption。
如果附加了20个或更少的ajax调用，则此方法可以正常工作。但当我有20多个作品时，当你在作品上悬停时会有明显的滞后感，其中显示name和caption的过渡只有在悬停大约3秒后才会显示。我非常强调如何解决最初使用的延迟问题

$(".viewport-computer .img_thumb_holder").hover(function(){
        //$(this).stop().fadeTo('slow', 0.4);
        $(this).find(".caption").stop().fadeTo('slow', 1);
    },function(){
        $(this).stop().fadeTo('slow', 1);
        $(".caption").stop().fadeTo('slow', 0);
        $(".viewport-computer .img_thumb_holder .img_thumb").stop().fadeTo(1, 1);
        $(".viewport-computer .img_thumb").hide();
    });

但是我在网上搜索之后把它改成了.on（mouseenter），我应该用.on，但它不能解决问题。如有其他意见，将不胜感激
更新-显示如何显示代码
HTML格式：

            <div class="row">
                <!-- For mobile viewport -->
                <div class="viewport-mobile img_thumb_holder_div col-xs-12 hidden-lg">
                </div>

                <!-- For computer viewport -->
                <div class="viewport-computer img_thumb_holder_div col-lg-12 visible-lg no-padding ">

                </div>
             </div>

JS-单击此选项卡后，它将显示所有作品

            $(".tab_bm").click(function() {
                $(".container .popUp .author_pic_holder img").css("border-color", "#006a96");
                $(".divider").css("background-image", "url(images/divider_it.png)");
                $(".infinite_header img").attr("src", "images/header_it.png");
                $(document.body).css("background-image", "url(images/BG/BlueBG.jpg)");
                $(".footer img").attr("src", "images/Footer_v1_1.jpg");
                //remove all div images first before adding images
                resetHome(); // this remove all the previously added displayed works
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "CMS/PHP/displayBmThumbs.php",
                    success: function(data) {
                        $(".viewport-computer .img_thumb_holder").remove();
                        $(".viewport-mobile .img_thumb_holder").remove();
                        $(".author_pic_holder").show();
                        $(".author_info_holder").show();
                        for(i=0; i<data.length; i++){
                            $(".viewport-computer.img_thumb_holder_div").append("<div class='col-lg-2 img_thumb_holder no-padding bioDisplay'><div class='featured'></div><img class='img_thumb'><h2 class='caption'>Author<br />Description</h2></div>");
                            $(".viewport-mobile.img_thumb_holder_div").append("<div class='col-xs-6 img_thumb_holder top-buffer bioDisplay'><img class='img_thumb'><h2 class='caption_mobile'>Author<br />Description</h2></div>");
                        }
                        idArray = [];
                        captionArray = [];
                        $('.viewport-computer .img_thumb_holder img').each(function(index, element) {
                            // Work out the data to set

                            // Now apply this to the elements
                            if (data[index]){
                                var imageUrl = data[index].links;
                                var captionHtml = "<span>" + toTitleCase(data[index].caption) + "<span class='spacer'></span><br/>"
                                $(element).attr("src", imageUrl);
                                if(checkIfCom == true){
                                    $(element).parent().css('background-image', 'url("'+imageUrl+'")');
                                }
                                $(element).next().html(captionHtml);
                                captionArray.push(toTitleCase(data[index].caption));
                                idArray.push(data[index].id);
                                homeLinksArray.push(data[index].links);
                                //homeTitleArray.push(toTitleCase(data[index].title));
                            }
                            $('.viewport-mobile .img_thumb_holder img').each(function(index, element) {
                                var imageUrl = homeLinksArray[index];
                                var captionHtml = captionArray[index];
                                $(element).attr("src", imageUrl); // i must find a way to solve this
                                $(element).next().html(captionHtml);

                            });
                            console.log("id: " + idArray);
                            console.log("caption: " + captionArray);
                            console.log("homeLinksArray: " + homeLinksArray );
                            hideDefault()
                            captionHover();
                            clickToAuthorPage();
                        });
                     }
                });
            });

最后
我当前的mouseEnter/mouseLeave函数

function captionHover() {
    $(".viewport-computer .img_thumb_holder").on({
        mouseenter: function () {
            //stuff to do on mouse enter
            $(this).find(".caption").stop().fadeTo('slow', 1);
        },
        mouseleave: function () {
            //stuff to do on mouse leave
            $(this).stop().fadeTo('slow', 1);
            $(this).find(".caption").stop().fadeTo('slow', 0);
            //$(".caption").stop().fadeTo('slow', 0);
            $(".viewport-computer .img_thumb_holder .img_thumb").stop().fadeTo(1, 1);
            $(".viewport-computer .img_thumb").hide();
        }
    });
};

现在的延迟并没有那么糟糕，但是你仍然可以注意到0.5的延迟，还有什么方法可以改进它以提高工作效率？

最佳答案

通过定位与实例隔离的元素，可以在所有元素上减少许多不必要的动画
在mouseenter中，您的目标是.caption的实例，但在mouseleave中，您的目标是页面中的所有实例
尝试

$(".viewport-computer .img_thumb_holder").on({
    mouseenter: function () {
        //stuff to do on mouse enter
        $(this).find(".caption").stop().fadeTo('slow', 1);
    },
    mouseleave: function () {
        //stuff to do on mouse leave

        var $this = $(this).stop().fadeTo('slow', 1);
        $this.find(".caption").stop().fadeTo('slow', 0);
        /* not sure where these are , perhaps this can be optimized also*/
        $(".viewport-computer .img_thumb_holder .img_thumb").stop().fadeTo(1, 1);
        $(".viewport-computer .img_thumb").hide();
    }
});

查看相关的标记将非常有帮助

关于javascript - 当我有很多动态生成的div标签时，$。on(“mouseenter”)落后于我的网站，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28822912/