【问题标题】：jquery setInterval or scrolljquery setInterval 或滚动
【发布时间】：2013-03-13 12:41:58
【问题描述】：

我正在做一个项目，我需要收听scroll 事件..我想知道什么是更好的方法..

第一种方法

 function scroll() {
    if ($(window).scrollTop() > 200) {
        top.fadeIn();
    } else {
        top.fadeOut();
    }
    if (menuVisible) {
      quickHideMenu();
    }
}

第二种方法

      function scroll() {
          didScroll = true;
      }

      setInterval(function() {
          if ( didScroll ) {
              didScroll = false;
              if ($(window).scrollTop() > 200) {
                  top.fadeIn();
              } else {
                  top.fadeOut();
              }
              if (menuVisible) {
                quickHideMenu();
              }
          }
      }, 250);

谢谢:)

【问题讨论】：

ejohn.org/blog/learning-from-twitter 阅读 twitter 的创建者 John Resig 的这篇文章
@MohammadAdil 我读过它，这就是让我想到这个问题的原因..
@LuckySoni 你最后做了什么？
@BenjaminGruenbaum 我不记得我当时用的是什么，但今天我会使用适合我需要的任何东西。我认为我的问题中的第二种方法和公认的答案都同样好，但它们根本不同。一种使用节流，另一种使用去抖动。解决方案的选择应取决于您想要做什么。在这里查看区别demo.nimius.net/debounce_throttle。抱歉，我在您提出问题多年后才回答您的问题，但我很高兴现在有更好的答案。
我在 2013 年问过这个问题 - 我不知道我为什么问这个问题：D

标签： jquery performance optimization

【解决方案1】：

两者都不是。我只是在阅读有关 JS/jQuery 模式的信息。 Window Scroll 事件有一个例子：jQuery Window Scroll Pattern

var scrollTimeout;  // global for any pending scrollTimeout

$(window).scroll(function () {
    if (scrollTimeout) {
        // clear the timeout, if one is pending
        clearTimeout(scrollTimeout);
        scrollTimeout = null;
    }
    scrollTimeout = setTimeout(scrollHandler, 250);
});

scrollHandler = function () {
    // Check your page position
    if ($(window).scrollTop() > 200) {
        top.fadeIn();
    } else {
        top.fadeOut();
    }
    if (menuVisible) {
        quickHideMenu();
    }
};

原文来自：Javascript Patterns

【讨论】：

那个 Javascript 模式库是黄金！

【解决方案2】：

对我来说效果很好

<style type="text/css">
    .scrollToTop {
        width:100px; 
        height:130px;
        padding:10px; 
        text-align:center; 
        background: whiteSmoke;
        font-weight: bold;
        color: #444;
        text-decoration: none;
        position:fixed;
        top:75px;
        right:40px;
        display:none;
        background: url('arrow_up.png') no-repeat 0px 20px;
    }

.scrollToTop:hover{
    text-decoration:none;
}

</style>

<script>
$(document).ready(function(){

    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });

    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    }); 
});
</script>

<a href="#" class="scrollToTop">Scroll To Top</a>

http://www.paulund.co.uk/how-to-create-an-animated-scroll-to-top-with-jquery

【讨论】：

不检查fadeIn()方法是否已经应用到元素上可以吗？