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功能

回答

相關問題