Javascript 当我有很多动态生成的div标记时，$.on（“mouseenter”）会滞后于我的网站

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

    $(".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();
        }
    });

它允许我将鼠标悬停在作品上，并显示所显示作品的

名称

和

标题

如果ajax调用附加了20个或更少的值，那么这就可以了。但是，当我有20多部作品时，当你在作品上方悬停时，会有一种明显的滞后感，其中显示

名称

和

标题

的过渡仅在悬停大约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:

---

延迟现在还不错，但你仍然可以注意到0.5的延迟，还有什么方法可以改进它以提高工作效率吗？

可以通过针对与实例隔离的元素来减少所有元素上大量不必要的动画

在mouseenter中，您以

.caption

的实例为目标，但在mouseleave中，您以页面中的所有实例为目标

试一试

---

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

我们可以查看HTML吗？3秒钟听起来太长了，但是你做的事情效率很低，尤其是在

mouseleave

处理程序中。你应该考虑阅读。你能提供沙箱的例子吗？另外，听起来您可能只需要在CSS中就可以做到这一点。如果要动态加载绑定到的元素，您只需要使用

.on（）

而不是

.hover（）

。但是您没有使用

.on（）

的委派语法，因此这不适用。标题查找可以优化，其余部分我们需要查看您的标记，但我不确定这是否足以导致延迟，请尝试在标记中硬编码50个或更多项（未加载ajax），这会导致延迟吗？您电脑的规格是什么？如果他们没有延迟，那么问题就出在其他地方了，可能是ghost nodesnice，这确实使过程稍微平稳了一点，现在它只是一个非常小的延迟，我会说0.5秒，让我发布我的代码。如果你可以，也可以在jsfiddle.net中创建一个演示。。我删除了$（“.viewport computer.img_thumb_holder.img_thumb”）.stop（）.fadeTo（1,1）$（“.viewport computer.img_thumb”）.hide（）；一切都变得很顺利。不要再耽搁了

            <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>

            $(".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();
                        });
                     }
                });
            }); 

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();
        }
    });
};

$(".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();
    }
});