问jQuery clearTimeout问题
EN

Stack Overflow用户

提问于 2016-03-10 13:41:45

回答 1查看 182关注 0票数 0

我想在短时间内逐一显示一些元素。为此，我检查div是否在viewport中。如果是，则显示元素。如果用户向下滚动，使div不再在视区中，则应该清除setTimeout。但它似乎不起作用！你可以试试..。向下滚动几次，然后向上滚动看问题。超时未被清除，元素显示混乱。

那我的错误在哪里？

<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
    .div1, .div2, .div3 {
        opacity:0;
        float:left;
        width:300px;
        height:300px;
        font-size:80px;
        margin:20px;
    }
    .show {
        opacity:1;
    }
</style>
</head>
<body>
    <script>
        jQuery(document).ready(function(){
            recheck();
            jQuery(window).scroll(function(){
                recheck();
            });

            var timer1, timer2, timer3;
        });
        function recheck() {
            if (jQuery('.box').is_on_screen()) {
                timer1 = setTimeout(function(){ if (jQuery('.box').is_on_screen()) { jQuery('.box .div1').addClass('show'); } },1000);
                timer2 = setTimeout(function(){ if (jQuery('.box').is_on_screen()) { jQuery('.box .div2').addClass('show'); } },3000);
                timer3 = setTimeout(function(){ if (jQuery('.box').is_on_screen()) { jQuery('.box .div3').addClass('show'); } },5000);
            } else {
                window.clearTimeout(timer1);
                window.clearTimeout(timer2);
                window.clearTimeout(timer3);        
                setTimeout(function(){ jQuery('.box div').removeClass('show'); },1);
            }
        }

        jQuery.fn.is_on_screen = function(){
            var win = jQuery(window);
            var viewport = {
                top : win.scrollTop(),
                left : win.scrollLeft()
            };
            viewport.right = viewport.left + win.width();
            viewport.bottom = viewport.top + win.height();

            var bounds = this.offset();
            bounds.right = bounds.left + this.outerWidth();
            bounds.bottom = bounds.top + this.outerHeight();

            return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
        };
    </script>

    <div style="float:left;width:100%;height:3000px;">

        <div class="box" style="float:left;border:3px solid red;">
            <div class="div1" style="border:3px solid blue;background:#c4caf3;">1</div>
            <div class="div2" style="border:3px solid orange;background:#fbe7cb;">2</div>
            <div class="div3" style="border:3px solid green;background:#d6f1d4;">3</div>
        </div>

    </div>

</body>
</html>

jquery

settimeout

cleartimeout

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-03-10 14:11:04

滚动事件在用户滚动时触发很多次，每次设置另一次超时时，都会覆盖旧超时的ID。你需要确保你只设置了一次计时器。

var timer1, timer2, timer3, setTimers = false; // Move these outside the ready function
function recheck() {
  if (jQuery('.box').is_on_screen()) {
    if(!setTimers) { // Only set the timers once
      setTimers = true;
      timer1 = setTimeout(function(){ if (jQuery('.box').is_on_screen()) { jQuery('.box .div1').addClass('show'); } },1000);
      timer2 = setTimeout(function(){ if (jQuery('.box').is_on_screen()) { jQuery('.box .div2').addClass('show'); } },3000);
      timer3 = setTimeout(function(){ if (jQuery('.box').is_on_screen()) { jQuery('.box .div3').addClass('show'); } },5000);
    }
  } else {
    window.clearTimeout(timer1);
    window.clearTimeout(timer2);
    window.clearTimeout(timer3);
    setTimeout(function(){ jQuery('.box div').removeClass('show'); },1);
    setTimers = false; // Allow setting timers again
  }
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35918195

复制

相似问题

问jQuery clearTimeout问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery clearTimeout问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery clearTimeout问题
EN