Господа, есть функция window.onscroll она запускается и если документ проскролен больше 200px то она запускает countRun() , а если меньше то
countStop()
var p1 = document.querySelector('.p1');
var p2 = document.querySelector('.p2');
var wrapper = document.getElementById('wrapper');
var count = 0;
var run;
window.onscroll = function() {
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
p1.innerHTML = scrolled;
if (scrolled > 200) {
countRun();
} else {
countStop();
}
}
function countRun() {
run = setInterval(function() {
p2.innerHTML = count++;
}, 1000)
}
function countStop() {
count = 0;
clearInterval(run);
}
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: #272727;
perspective: 100px;
color: white;
}
#wrapper {
position: relative;
width: 100%;
height: 300%;
}
.p1 {
position: sticky;
width: 100px;
height: 50px;
left: 25px;
top: 25px;
background: rgba(0, 0, 0, .3);
color: white;
font-size: 20px;
text-align: center;
line-height: 2;
transition: all .5s;
}
.p2 {
position: sticky;
width: 100px;
height: 50px;
left: 25px;
top: 70px;
background: rgba(0, 0, 0, .3);
color: white;
font-size: 20px;
text-align: center;
line-height: 2;
transition: all .5s;
}
0
0
Но как видно в примере, все работает не так хотелось бы. Догадываюсь, что в условии еще и надо проверить, если countRun() запущен и не запускать его больше, ну или что-то другое о чем я не догадываюсь...
Ответ
Проверить "запущена ли функция" невозможно. Можно проверить, "была ли запущена функция". Для этого функция сама должна себя где-то регистрировать.
В вашем случае, есть несколько решений. Первое, в лоб - нужно просто сбрасывать интервал, если счётчик уже был запущен. Второе, что почти то же самое, обнулять переменную run, и по ней определять, "была ли запущена функция".
var p1 = document.querySelector('.p1');
var p2 = document.querySelector('.p2');
var wrapper = document.getElementById('wrapper');
var count = 0;
var run;
window.onscroll = function() {
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
p1.innerHTML = scrolled;
if (scrolled > 200) {
countRun();
} else {
countStop();
}
}
function countRun() {
if (run) return;
// или
// if (run) clearInterval(run);
run = setInterval(function() {
p2.innerHTML = count++;
}, 1000)
}
function countStop() {
count = 0;
clearInterval(run);
run = false;
}
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: #272727;
perspective: 100px;
color: white;
}
#wrapper {
position: relative;
width: 100%;
height: 300%;
}
.p1 {
position: sticky;
width: 100px;
height: 50px;
left: 25px;
top: 25px;
background: rgba(0, 0, 0, .3);
color: white;
font-size: 20px;
text-align: center;
line-height: 2;
transition: all .5s;
}
.p2 {
position: sticky;
width: 100px;
height: 50px;
left: 25px;
top: 70px;
background: rgba(0, 0, 0, .3);
color: white;
font-size: 20px;
text-align: center;
line-height: 2;
transition: all .5s;
}
0
0
Вариации на тему:
var p1 = document.querySelector('.p1'); var p2 = document.querySelector('.p2'); var wrapper = document.getElementById('wrapper'); class Counter { constructor(el, period = 1000) { this._el = el; this._period = period; this._run = false; this.clear(); } clear() { this._el.innerText = this.counter = 0; } inc() { this._el.innerText = ++this.counter; } start() { if (this._run) return false; this._run = setInterval(() => this.inc(), this._period); } stop() { if (this._run) clearInterval(this._run); this._run = false; this.clear(); } } let counter = new Counter(p2, 500); window.onscroll = function() { let scrolled = window.pageYOffset || document.documentElement.scrollTop; p1.innerText = scrolled; if (scrolled > 200) { counter.start(); } else { counter.stop(); } } * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: #272727; perspective: 100px; color: white; } #wrapper { position: relative; width: 100%; height: 300%; } .sticky { position: sticky; background: rgba(0, 0, 0, .3); color: white; font-size: 20px; text-align: center; line-height: 2; transition: all .5s; width: 100px; height: 50px; } .p1 { left: 25px; top: 25px; } .p2 { left: 25px; top: 70px; }
0
0
Комментариев нет:
Отправить комментарий