jquery 및 $ (window) .resize 함수가 포함 된 무제한 루프

Question

모바일 사용자를 위해 자동 스크롤 기능을 사용하여 입력이 겹치지 않도록 더 이상 키보드에 문제가 발생하지 않도록하고 싶습니다.
-> 누군가가 입력을 클릭하면 페이지가 고정 탐색으로 인해 -64px까지 스크롤됩니다.

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

:

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

그래서 내가 그런 통화 기능을했다 : 예를 들어 풍경에서 내가 설정 때문에이 기능이 작동하지 않을 수 세로로 태블릿 사용자보기 변경이있는 경우

내 문제입니다

하지만 문제는 변경된 창 너비 후에 무한 루프가 발생한다는 것입니다.


전체 코드 :

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

발생합니다. 하나만을 원한다. 예를 들어 부울로 추적하십시오. (실제로 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(); 
    }); 
});