jqueryと$（window）.resize関数を使用した無限ループ

Question

私は、モバイルユーザーのためにフォーカス機能を自動スクロールしたいので、入力に重複することがあるキーボードに問題がありません。
- >誰かが入力をクリックすると、固定ナビゲーションのためページが-64pxまでスクロールします。

私の問題は、私はセットアップので横向きから縦向きに機能が動作しない可能性があり、たとえば場合は、タブレットユーザーの変更図である：

if ($(window).width() <= 1250) {}); 

だから私はそのようなコール機能を作った：

$(window).resize(function() { 
    resizeFix(); 
}); 

しかし、問題は、変更されたウィンドウの幅の後に無限回ループすることです。


全体コード：

$(document).ready(function(){ 
    resizeFix = function() { 
      if ($(window).width() <= 1250) { 
      $('input[type=text], input[type=checkbox], input[type=password], textarea').focus(function() { 
        $('html, body').animate({ 
         scrollTop: $('input:focus, textarea:focus').offset().top - 64 
        }, 500); 
       }); 
      }; 

    }; 

    resizeFix(); 

    $(window).resize(function() { 
     resizeFix(); 
    }); 
}); 

に

編集：私はすでに試した：

$(window).resize(function() { 
    if ($(window).width() <= 1250) { 
    resizeFix(); 
}); 
}); 

Answer 1

各resizeイベントにあなたは要素ごとにフォーカスするための新しいイベントリスナーをアタッチしているためです。あなただけがを1つとしたいです。たとえば、ブール値でそれを追跡してください。 （実際に何をしているのかは、関数resizeFixが既にトリガされているかどうかを追跡していることです）リスナーが> 1250にスケールを変更したときに再度トリガーしないようにするには、off()を呼び出します。

$(document).ready(function() { 
    var listenerAttached = false; 
    var resizeFix = function() { 
    var w = $(window).width(); 
    if (!listenerAttached && w <= 1250) { 
     $('input[type=text], input[type=checkbox], input[type=password], textarea').on("focus", function() { 
     $('html, body').animate({ 
      scrollTop: $('input:focus, textarea:focus').offset().top - 64 
     }, 500); 
     }); 
     listenerAttached = true; 
    } else if (listenerAttached && w > 1250) { 
     $('input[type=text], input[type=checkbox], input[type=password], textarea').off("focus"); 
     listenerAttached = false; 
    } 
    }; 

    resizeFix(); 

    $(window).resize(function() { 
    resizeFix(); 
    }); 
});