Функция запуска триггера при прокрутке
Я хочу воспроизвести звук при прокрутке к определенному id #counter. Он отлично работает, но я хочу сыграть его один раз. Когда кто-то прокручивается вверх или вниз, музыка в какой-то петле. Как это остановить?
// play countdown sound on scroll when you hit #counter
$(window).scroll(function() {
var elemTop = $('#counter').offset().top,
elemHeight = $('#counter').outerHeight(),
windowHeight = $(window).height(),
windowScroll = $(this).scrollTop();
var countdownSound = new Audio('./music/countdown.mp3');
if( windowScroll > (elemTop + elemHeight - windowHeight) ) {
countdownSound.play();
}
});
Возможно, вы можете просто поставить внешнюю переменную, чтобы проверить:
var played = false;
$(window).scroll(function() {
var elemTop = $('#counter').offset().top,
elemHeight = $('#counter').outerHeight(),
windowHeight = $(window).height(),
windowScroll = $(this).scrollTop();
var countdownSound = new Audio('./music/countdown.mp3');
if( windowScroll > (elemTop + elemHeight - windowHeight) && played == false) {
countdownSound.play();
played = true;
}
});
или, возможно, вы можете создать функцию воспроизведения и вызвать ее через lodash.once(https://lodash.com/docs/4.17.4#once) или что-то в этом роде.
Тем не менее, часто при вызове функций onscroll полезно дросселировать их:
$(window).scroll(_.throttle(do_things_onscroll, 25));
function do_things_onscroll(){
//[do things]
}
Обратите внимание: я по-прежнему пользуюсь утилитами Lodash, но вы можете использовать какую-то другую библиотеку, например, подчеркивание, или просто узнать код только для дроссельной заслонки.
