Question

我写了一行，如果单击一个输入，它会隐藏一个div。 div是一个静态实用程序导航栏，导致Android的本机键盘出现问题。这是代码，但问题是它运行9次，有时10次，我的后端开发人员说这将是性能问题。我该怎么做才能防止这种情况发生？我是javaScript和jQuery的新手，所以这对我来说很有用。

<ion-content>
  <blocks-banners-slideshow #block class="contentBlock" [config]="{zone: 'main'}" [slideOptions]="{loop: true}"></blocks-banners-slideshow>

</ion-content>

Answer 1

它运行这么多次的原因是因为如果窗口调整大小，你就会随时添加一个事件。

在调整窗口大小时，事件将多次触发。每次窗口调整大小时，您都会添加一个新事件。

你需要这样做。

//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);

我没有对此进行过测试，但从结构上来说，这是你需要做的。您需要添加更好的改进。您应该使用委托，而不是将事件放在输入标记上。你可以读一下这个。

例如，如果您之后要向页面添加新的输入框。这不起作用。

Answer 2

      //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);

单击输入时隐藏div

2 个答案: