Question

我有一个setInterval，我是克隆元素。我使用方法slice(0,4)选择前4个元素，然后当顶部滚动大于元素高度时，使用remove()从DOM中删除它们。
这是完美的，但是当我添加setTimeout函数以在滚动条apears 2秒后开始动画滚动时，即将删除它的时刻会删除比我给它更多的元素。

var i = 0;
var blackposition;
var square = $('<span></span>').first();

var endless = setInterval(function(){
var lungime = ($('span').height())/4;
console.log(lungime);
if(i%4==0){
blackposition = Math.floor(4*Math.random());
}

var math = (blackposition == (i%4))? 0 : 1;



square.clone().addClass('color_' + math).text((math < 1) ? 'even' + i : 'odd' + i).appendTo('#container');
i++;
setTimeout(function(){$('body,html').animate({scrollTop:'+='+ lungime + 'px' },500,'linear');},22000)

},500);




$(window).on('scroll',function(){
if( $("span").height() < $(window).scrollTop()+2){
$(window).scrollTop(0);
 $("span").slice(0,4).remove();
}})

.color_0{
outline: 1px solid black;
width: 22%;
height: 10vh;
background-color: black;
color: white;
line-height: 30px;
display: inline-block;
  

}
.color_1{
outline: 1px solid black;
width: 22%;
height: 10vh;
background-color:white ;
line-height: 30px;
display: inline-block;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body style="background-color:gray; margin:0">
<div id="container" style=" height: 100%; width:20%; margin-left: auto; margin-right: auto">

</div>

我想这是因为在延迟后删除元素时滚动条不会从0开始。我写了我的最后一行，使滚动条开始为0时即将删除，但没有运气。

我该怎么办？

Answer 1

JS底部的滚动处理程序在窗口滚动时触发，并且主体自动滚动，它会激活很多，就像你添加的每一行块的40-50倍一样。

只要满足条件（$（“span”）。height（）＆lt; $（window）.scrollTop（）+ 2），就会很快删除行，直到不再满足条件。这就是为什么你会在22秒倒计时结束后立即看到几行被删除的原因。为了满足高度条件，有3行要删除，之后每次添加新行并发生第一个滚动事件时它会立即删除一行。

这个小提琴使用你的初始代码并在每次删除一行时写入控制台输出：http://jsfiddle.net/BenjaminRay/pk0yhzyp/这可以帮助你看到22秒后发生了什么。

行$（窗口）.scrollTop（0）;没有任何效果，因为它在滚动已经发生之后被调用，然后随着主体自动滚动，它每40毫秒左右再次被调用。

如果您的目标是每次添加新行时删除一行，但仅在经过20 + 2秒之后删除一行，以便滚动条总是稍微落后（即页面比行高1-2行）你可以删除滚动的检测并简单地剪切循环中的行，并带有一个标志，指示初始延迟何时到期：

var i = 0;
var blackposition;
var square = $('<span></span>').first();
var removingRows = false; // Will be set once we can start removing rows

var endless = setInterval(function () {
    var lungime = ($('span').height()) / 4;
    console.log(lungime);
    if (i % 4 == 0) {
        blackposition = Math.floor(4 * Math.random());
        // Remove a row every 4 blocks after flag has been set    
        if (removingRows) {
            $("span").slice(0, 4).remove();
        }
    }

    var math = (blackposition == (i % 4)) ? 0 : 1;

    square.clone().addClass('color_' + math).text((math < 1) ? 'even' + i : 'odd' + i).appendTo('#container');
    i++;
    setTimeout(function () {
        $('body,html').animate({
            scrollTop: '+=' + lungime + 'px'
        }, 500, 'linear');
        // Set flag so we can start removing rows
        removingRows = true;
    }, 22000)

}, 500);

演示：http://jsfiddle.net/BenjaminRay/na1729bo/

在自动向下滚动时删除确切数量的元素

1 个答案: