jquery 和 $(window).resize 函数无限循环

Unlimited loop with jquery and $(window).resize function

我想为移动用户制作一个自动滚动以聚焦功能,这样他们就不会再遇到有时与输入重叠的键盘问题。
->如果有人点击输入页面向下滚动到这个,-64px 因为固定导航。

我的问题是,例如,如果平板电脑用户将视图从横向更改为纵向,则该功能无法工作,因为我设置了:

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

所以我做了一个这样的调用函数:

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

但问题是它在改变 window 宽度后无限循环。


全部代码:

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

发生这种情况是因为在每个调整大小事件中,您都为每个元素的焦点附加了一个新的事件侦听器。你只想要 一个。因此,例如,使用布尔值跟踪它。 (你实际上在做的是跟踪函数 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();
  });
});