нужна помощь с setInterval в JS
У меня есть функция:
window.addEventListener("scroll",function(){
a = pageYOffset;
b = setInterval(function(){
if(a>=115 && topp<1) {
topp = topp + 0.05;
console.log(topp);
navigation.style.opacity = topp;
}
else if(a<115 && topp>0){
console.log(topp);
topp = topp - 0.05;
navigation.style.opacity = topp;
}
},100);});
topp изначально равен 0; Суть которой плавно проявлять меню. Когда наше 'a' больше или меньше 115 код выполняется корректно с интервалом 0.1s. Проблема в том, что когда это же 'a' проходит рубеж в 115 в одну или другую сторону меню появляется без задержки в 0.1s, а сразу. Он просто делает мой topp=1/0
Ответы (1 шт):
Автор решения: qwabra
→ Ссылка
доки
демонстрация проблемы
во время прокрутки очень много раз срабатывает событие scroll поэтому создаётся множество setInterval.
i = 0
window.addEventListener("scroll", function () {
i++
console.log({ i })
})<br><br><br><br><br><br><br><br>-,-
<br><br><br><br><br><br><br><br>-,-
<br><br><br><br><br><br><br><br>-,-
<br><br><br><br><br><br><br><br>-,-
<br><br><br><br><br><br><br><br>-,-
<br><br><br><br><br><br><br><br>-,-решение
const navigation = document.querySelector('.navigation');
let a, b, topp = 0;
window.addEventListener("scroll", function () {
clearInterval(b); // перед созданием нового интервала необходимо удалить старый
a = pageYOffset;
b = setInterval(function () {
if (a >= 115 && topp < 1) {
topp = topp + 0.05;
console.log(topp);
navigation.style.opacity = '' + topp;
}
else if (a < 115 && topp > 0) {
console.log(topp);
topp = topp - 0.05;
navigation.style.opacity = '' + topp;
} else clearInterval(b); // не забываем удалить интервал после того как он отработает
}, 100);
});.navigation {
position: fixed;
opacity: 0;
}<div class="navigation">navigation</div>
<br><br><br><br>-,-
<br><br><br><br>-,-
<br><br><br><br>-,-
<br><br><br><br>-,-
<br><br><br><br>-,-
<br><br><br><br>-,-