Javascript- Выполнить функцию onscroll после заданного таймаута

Question

Итак, я создаю страницу с тремя div, которые становятся видимыми при прокрутке. Проблема заключается в том, что код делает их все выполнить в то же самое время, в то время как я хочу, чтобы их должно быть разница во времени между выполнением каждой 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); 

Таким образом, при этом все три диапазона становятся видимыми одновременно. Пожалуйста, предложите метод, чтобы дать им тайм-аут, чтобы одна функция выполнялась после другой.

Кроме того, может ли этот код быть более эффективным?

Answer 1

Я предположил, что вы хотели показать их в разное время после того же свитка. Так что это?

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 элементов