Question

我对jQuery真的没有经验，但我现在已经阅读了一个星期的教程，这是我的第一个代码。它有效，但一段时间后它开始表现不佳。特别是当连续多次调用mouseenter / mouseleave动作时。每次延迟增加，直到我移动到另一个元素。

我搜索了jQuery中的糟糕表现，但没有运气。我找到的最好的是提示：“使用ID代替类选择器（JQuery）”但我不确定为什么会出现问题，我发现很难替换'.photo '对于id-tag，因为它应该影响几个元素。

我还发现“一般来说，当你尽可能少地搜索或改变DOM时，JavaScript会更快。”这可能是我的问题，如果是这样，我怎么办？< / p>

因此，如果我的代码中的某些内容看起来很奇怪或者您有任何想法，请告诉我。谢谢！

CODE

$(document).ready(function(){
    $(".photo").mouseenter(function(){
        $(this).fadeTo("fast", 0.9);
    });
    $(".photo").mouseleave(function(){
        $(this).fadeTo("fast", 0.6);
    });
    $('.photo').click(function() {
        $(this).animate({width: '900px'});
        $(this).mouseleave(function(){
            $(this).animate({width: '294px'});
        });
    });

    $('.trigger').click(function() {
        if( $("#5").is(":hidden") ) {
            $("#6").hide('slow');
            $('.trigger').fadeTo('slow', 0);
        } else if ( $("#4").is(":hidden") ){
            $("#5").hide('slow');
        } else if ( $("#3").is(":hidden") ){
            $("#4").hide('slow');
        } else if ( $("#2").is(":hidden") ){
            $("#3").hide('slow');
        } else if ( $("#1").is(":hidden") ){
            $("#2").hide('slow');
        } else {
            $("#1").hide('slow');
            $(".triggerR").fadeTo('slow', 1);
        }
    });

    $('.triggerR').click(function() {
        if( $("#6").is(":hidden") ) {
            $("#6").toggle('slow');
            $(".trigger").fadeTo('slow', 1);
        } else if( $("#5").is(":hidden") ) {
            $("#5").toggle('slow');
        } else if ( $("#4").is(":hidden") ){
            $("#4").toggle('slow');
        } else if ( $("#3").is(":hidden") ){
            $("#3").show('slow');
        } else if ( $("#2").is(":hidden") ){
            $("#2").show('slow');
        } else if ( $("#1").is(":hidden") ){
            $("#1").show('slow');
            $(".triggerR").fadeTo('slow', 0);
        } 
    });
});

Answer 1

问题是你正在排队不同的动画。在进行另一个动画之前，使用动画上的stop功能取消所有qued动画。

.stop()

$(this).stop(true, true).fadeTo("fast", 0.9);

编辑：@ guffa建议保持不透明度更好用

$(this).stop(true, false).fadeTo("fast", 0.9);

Answer 2

问题可能是你有很多带有“photo”类的元素，并且你为它们添加了一个不同的监听器。

我不确定如何避免使用mouseenter / mouseleave，但你可以使用 event delegation点击次数...

Answer 3

这些是最小化的优化，所以你不会看到它们带来巨大的性能提升，而是做到了：

$('.photo').mouseenter(...);
$('.photo').mouseleave(...);
$('.photo').click(...);

您可以将功能链接起来，这样您只需执行一次$('.photo')：

$('.photo').mouseenter(...).mouseleave(...).click(...);

另请查看您多次选择相同元素的if条件;您可以将结果保存到变量中：

var foo = $('#6');

然后使用foo而不是反复执行$('#6')。

这有点大，但你在事件处理程序中添加了一个事件处理程序。每次单击.photo元素时，都会添加另一个mouseleave事件处理程序;它们会堆积起来，并可能导致页面变慢。

Answer 4

代码有两个问题。首先，如果mouseenter和mouseleate事件发生在上一个动画finsihed之前，动画将排队。如果您快速移入和移出几次，您将看到播放的所有动画，直到动画队列为空。

在开始新动画之前停止任何普及动画：

$(".photo").mouseenter(function(){
  $(this).stop().fadeTo("fast", 0.9);
});
$(".photo").mouseleave(function(){
  $(this).stop().fadeTo("fast", 0.6);
});

其次，在click事件处理程序中，您正在注册另一个mouseleave事件，因此，如果您多次单击，则会有多个事件处理程序在您离开元素时添加动画。您将看不到动画，因为它们会将大小设置为294像素到294像素的动画，但所有动画都会排队，并且会妨碍其他动画。

使用它时取消绑定mouseleave事件处理程序：

$('.photo').click(function() {
  $(this).animate({width: '900px'});
  function handler() {
    $(this).unbind('mouseleave', handler);
    $(this).animate({width: '294px'});
  }
  $(this).mouseleave(handler);
});

jQuery中的性能不佳

4 个答案: