Javascript-在设置的超时后执行onscroll功能

所以我创建了一个包含三个div的页面，这些页面在滚动时变得可见。问题是，该代码使得它们均实行在同一时间，而我想他们应该是每个onscroll函数的代码Javascript-在设置的超时后执行onscroll功能

有关部分的执行之间的时间差 -

HTML

<section id="section2"> 
    <span id="one" class="classbefore">lol</span> 
    <span id="two" class="classbefore">lol</span> 
    <span id="three" class="classbefore">lol</span> 
</section>

CSS

#section2 > span{ 
    width: 25%; 
    height: 50%; 
    position: absolute; 
    background: #f00; 
    -webkit-transition: all 0.5s ease; 
    box-shadow: 1px #000; 
} 
#section2 > #one{ 
    margin-left: 10%; 
} 
#section2 > #two{ 
    margin-left: 37.5%; 
} 
#section2 > #three{ 
    margin-left: 65%; 
} 
.classbefore{ 
    opacity: 0; 
    margin-top: 18%; 
} 
.classafter{ 
    opacity: 1; 
    margin-top: 20%; 
}

的Javascript

window.addEventListener('scroll', function (event) { 
    if (window.scrollY > 600) { 
    document.getElementById('one').className = "classafter"; 
    } else { 
     document.getElementById('one').className = "classbefore"; 
    } 
}, true); 
window.addEventListener('scroll', function (event) { 
    if (window.scrollY > 600) { 
    document.getElementById('two').className = "classafter"; 
    } else { 
     document.getElementById('two').className = "classbefore"; 
    } 
}, true); 
window.addEventListener('scroll', function (event) { 
    if (window.scrollY > 600) { 
    document.getElementById('three').className = "classafter"; 
    } else { 
     document.getElementById('three').className = "classbefore"; 
    } 
}, true);

所以，使用这个，所有的三个跨度在同一时间变得可见。请建议一种方法让它们超时，以便一个函数在另一个函数之后执行。

此外，此代码可以更有效吗？

来源

2016-06-14 Umesh Meena

为什么你要为窗口滚动定义三个单独的事件？ – hsh

根据你的代码，如果'window.scrollY> 600'所有的span得到class'classafter'，所以它们都是可见的同时.. –

我以为你打算在同一卷轴之后的不同时间显示它们。那么这个怎么样？

window.addEventListener('scroll', function (event) { 
if (window.scrollY > 600) { 

    var waitTime = 1000; //base time for showing (in miliseconds) 
    setTimeout(function() { 
     document.getElementById('one').className = "classafter"; 
    },waitTime); 
    setTimeout(function() { //We add time to the others waitings 
     document.getElementById('two').className = "classafter"; 
    },waitTime + 100); 
    setTimeout(function() { 
     document.getElementById('three').className = "classafter"; 
    },waitTime + 200); 
} else { 
    document.getElementById('one').className = "classbefore"; 
    document.getElementById('two').className = "classbefore"; 
    document.getElementById('three').className = "classbefore"; 
} 
}, true);

代码未测试！

而且，因为是同一个事件，你只需要一个事件侦听器，而不是3。但是，听众将在diferent倍

另外，如果你使用一个循环倒不如改变类的元素遍历元素：

window.addEventListener('scroll', function (event) { 
var elements = document.getElementsByName("commonName"); 
if (window.scrollY > 600) { 
    var waitTime = 1000;//base time for showing (in miliseconds) 
    for (var i = 0; i < elements.length; i++) { 
     setTimeout(function() { 
      elements[i].className = "classafter"; 
     }waitTime + i * 100); 
    } 
} else { 
    for (var i = 0; i < elements.length; i++) { 
     elements[i].className = "classafter"; 
    } 
} 
}, true);

代码未经测试！

然后它对N个元素有效

来源

2016-06-14 10:18:57

Javascript-在设置的超时后执行onscroll功能

回答

相关问题