为什么我的JQuery运行缓慢？

我对JQuery非常陌生，今天我才开始研究它。我全面搜索了可能导致这些代码无法工作的原因。向下滚动时，我希望h1移动到侧面并出现一个菜单按钮。这是有效的，但是当我再次向上滚动时，需要很长时间来反转它自己。我曾试图处理任何可能导致延迟或其他事情的事情，但据我所知，没有任何问题。链接至网站：http://www.dragonmath.net/rockets 为什么我的JQuery运行缓慢？

这里是我的代码：

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="styles/main.css" /> 
     <title>Rockets</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    </head> 
    <body> 
     <header> 
      <img id="menu" src="images/menu1.png" /> 
      <div id="headerdiv"> 
       <h1>Rockets</h1> 
       <img id="logo" src="images/logo1.png" /> 
      </div> 
     </header> 
     <nav> 
      <ul> 
       <li> 
        <a>Space Race</a> 
       </li> 
       <li> 
        <a>SpaceX</a> 
       </li> 
      </ul> 
     </nav> 
     <script> 
      $(document).ready(function() { 
       var $menu = $('img#menu'); 
       var $headerdiv = $("div#headerdiv") 
       var $nav = $('nav'); 


       $(window).on('scroll', function() { 
        if ($(window).scrollTop() > 40) { 
         $headerdiv.addClass("testheaderdiv"); 
         $menu.delay(800).slideDown(800); 
         $nav.addClass('testnav'); 
        } 
        if ($(window).scrollTop() < 40) { 
         $menu.slideUp(800, function() { 
          $headerdiv.removeClass('testheaderdiv'); 
         }); 
         $nav.removeClass('testnav'); 
        } 
       }); 
      }); 
     </script> 
    </body> 
</html>

CSS

* { 
    margin: 0px; 
    padding: 0px; 
    color: #00AAFF; 
    font-family: Arial; 
} 

body { 
    height: 800px; 
} 

header { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    height: 100px; 
    width: 100%; 
    background-color: #333; 
    z-index: 1; 
} 

div#headerdiv { 
    display: inline; 
    transition: all 1s; 
} 

h1 { 
    display: inline; 
    margin-left: 40px; 
    font-size: 40px; 
} 

header > img#menu { 
    position: fixed; 
    top: 20px; 
    left: 40px; 
    width: 40px; 
    height: 40px; 
    display: none; 
} 

header > div > img#logo { 
    display: inline; 
    width: 60px; 
    height: 60px; 
    position: relative; 
    top: 18px; 
    left: 20px; 
    transition: height 1s, width 1s; 
} 

nav { 
    position: relative; 
    top: 100px; 
    height: 40px; 
    width: 100%; 
    background-color: #333; 
} 

nav > ul { 
    list-style: none; 
} 

nav > ul > li { 
    display: inline-block; 
    height: 40px; 
    width: 200px; 
    text-align: center; 
    border-right: 1px solid #00AAFF; 
} 

nav > ul > li > a { 
    position: relative; 
    top: 6px; 
} 

.testheaderdiv { 
    margin-left: 80px; 
    transition: all 1s; 
} 

.testnav { 
    display: none; 
}

来源

2015-05-09 Taylor

我可以用代码中看到的主要问题是滚动的处理方式，对于每个滚动事件，您都将延迟添加到menu元素。

所以尽量

$(document).ready(function() { 
    var $menu = $('img#menu'); 
    var $headerdiv = $("div#headerdiv") 
    var $nav = $('nav'); 


    var flag; 
    $(window).on('scroll', function() { 
     if (flag !== 1 && $(window).scrollTop() > 40) { 
      $headerdiv.addClass("testheaderdiv"); 
      $menu.stop(true, true).delay(800).slideDown(800); 
      $nav.addClass('testnav'); 
      flag = 1; 
     } 
     if (flag !== 2 && $(window).scrollTop() < 40) { 
      $menu.stop(true, true).slideUp(800, function() { 
       $headerdiv.removeClass('testheaderdiv'); 
      }); 
      $nav.removeClass('testnav'); 
      flag = 2; 
     } 
    }); 
});

来源

2015-05-09 06:17:43

所以它是缓慢的，因为它是有每次检查滚动时间做延迟？ – Taylor

@Taylor是...所以动画工作的所有延迟之前添加需要执行...所以我们可以使用[.stop（）]（https://api.jquery.com/stop/ ）清除动画队列中的任何项目，并使用标志确保每个if块在交换机上仅执行一次（案例 –

）这使得更有意义。 – Taylor

为什么我的JQuery运行缓慢？

回答

相关问题