入力がクリックされたときにdivを非表示にします

Question

入力をクリックするとdivを非表示にします。 divは、Androidのネイティブキーボードに問題が発生した静的ユーティリティのナビゲーションバーです。ここにコードがありますが、問題は9回、時には10回実行され、バックエンドの開発者はパフォーマンス上の問題であると言います。これを防ぐために私は何ができますか？私はjavaScriptとjQueryの初心者です。

function utilityNav() { 
    if($(window).width() < 891) { 
    //Utility Mobile Nav background-color 
    var div = $('.navbar-static-bottom').show(); 
    $('input').focus(function() { 
    $('.navbar-static-bottom').fadeOut(); 
    $("."+$(this).attr('input')).fadeIn(); 
    }); 

    $('input').blur(function() { 
    $('.navbar-static-bottom').fadeIn(); 
    }); 
    } 
} 
utilityNav(); 
$(window).on('resize', utilityNav); 
$('input').blur(utilityNav); 

Answer 1

 //Setup 
    function utilityNav() { 
    if($(window).width() < 891) { 
     //Utility Mobile Nav background-color 
     $('.navbar-static-bottom').show(); 
    } 
    } 
    function setupUtil(){ 
    $('body').on('focus', 'input', debounce(function(e) { 
     if($(e.currentTarget).is(':focus')) { 
     $('.navbar-static-bottom').fadeOut(); 
     } 
    }, 100)); 

    $('body').on('blur', 'input', debounce(function(e) { 
     if(!$(e.currentTarget).is(':focus')) { 
     $('.navbar-static-bottom').fadeIn(); 
     } 
    }, 100)); 
    } 

    setupUtil(); 
    $(window).on('resize', utilityNav); 

Answer 2

これは何度も実行されている理由は、ウィンドウのサイズを変更すると、これまでにイベントが追加されているからです。

ウィンドウのサイズを変更すると、イベントは複数回発生します。ウィンドウのサイズが変更されるたびに、新しいイベントが追加されます。

これを行う必要があります。

//SETUP 

function utilityNav() { 
    if($(window).width() < 891) { 
    //Utility Mobile Nav background-color 
    $('.navbar-static-bottom').show(); 
} 

function Setup(){ 
    $('input').focus(function() { 
    $('.navbar-static-bottom').fadeOut(); 
    $("."+$(this).attr('input')).fadeIn(); 
    }); 

    $('input').blur(function() { 
    $('.navbar-static-bottom').fadeIn(); 
    utilityNav(); 
    }); 
    } 
} 


utilityNav(); 
$(window).on('resize', utilityNav); 

これはテストしていませんが、構造的にはこれが必要です。 さらに改善が必要な場合があります。 イベントを入力タグに配置する代わりに、代理人を使用する必要があります。あなたはこれを読むことができます。

たとえば、後で新しい入力ボックスをページに追加する場合です。これはうまくいかないでしょう。