2

私は本当に jQuery の経験がありませんが、チュートリアルを 1 週間読んでいて、これが私の最初のコードです。動作しますが、しばらくするとパフォーマンスが低下し始めます。特に、mouseenter/mouseleave アクションが連続して数回呼び出された場合。別の要素に移動するまで、遅延が増加するたびに。

jQuery でのパフォーマンスの悪さについてグーグルで検索しましたが、運がありませんでした。私が見つけた最高のヒントは、「クラスセレクターの代わりにIDを使用する（JQuery）」というヒントでしたが、それが問題になる理由がわかりません.idタグの「.photo」を置き換えるのは難しいと思いますいくつかの要素に影響を与えるはずです。

また、「一般的に、JavaScript は DOM をできるだけ検索したり変更したりしない方が高速です。」 それが私の問題でしょうか。

私のコードで何かおかしくなったり、何か考えがあれば教えてください。ありがとう！

コード

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

4 に答える 4

1

問題は、さまざまなアニメーションをキューに入れていることです。stop別のアニメーションを実行する前に、アニメーションの関数ですべてのキューされたアニメーションをキャンセルします。

。止まる（）

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

編集：不透明度を維持するための@guffaのアドバイスにより、より適切に使用できます

$(this).stop(true, false).fadeTo("fast", 0.9);
于 2013-02-01T13:50:13.250 に答える
0

コードには 2 つの問題があります。まず、前のアニメーションが終了する前にイベントが発生した場合、mouseenterアニメーションmouseleateはキューに入れられます。数倍の速さで移動すると、アニメーション キューが空になるまで、そのすべてのアニメーションが再生されます。

新しいアニメーションを開始する前に、前のアニメーションを停止します。

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

次に、clickイベント ハンドラーで別のmouseleaveイベントを登録しているため、複数回クリックすると、要素を離れるたびに複数のイベント ハンドラーがアニメーションを追加します。サイズを 294px から 294px にアニメーション化するため、アニメーションは表示されませんが、すべてのアニメーションがキューに入れられ、他のアニメーションの邪魔になります。

mouseleave使用したイベント ハンドラーをバインド解除します。

$('.photo').click(function() {
  $(this).animate({width: '900px'});
  function handler() {
    $(this).unbind('mouseleave', handler);
    $(this).animate({width: '294px'});
  }
  $(this).mouseleave(handler);
});
于 2013-02-01T14:01:01.397 に答える
0

これらは最小限の最適化であるため、パフォーマンスが大幅に向上することはありませんが、代わりに次のことを行います。

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

$('.photo')代わりに関数をチェーンして、一度だけ行うようにします。

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

ifまた、同じ要素を複数回選択している条件も見てください。結果を変数に保存できます。

var foo = $('#6');

繰り返しfoo行うのではなく、使用してください。$('#6')

これは少し大きくなりますが、イベント ハンドラー内にイベント ハンドラーを追加しています。要素をクリックするたびに、別のイベント ハンドラー.photoを追加します。mouseleaveそれらが蓄積され、ページの速度が低下する可能性があります。

于 2013-02-01T13:59:35.430 に答える
0

問題は、「写真」クラスの要素がたくさんあり、それらすべてに別のリスナーを追加することです。

mouseenter / mouseleaveでそれを回避する方法はわかりませんが 、クリックにはイベント委任を使用できます...

于 2013-02-01T13:52:38.217 に答える