Функция запуска триггера при прокрутке

75
4

Я хочу воспроизвести звук при прокрутке к определенному 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();
}
});

спросил(а) 2017-06-26T18:27:00+03:00 2 года, 5 месяцев назад
1
Решение
54

Возможно, вы можете просто поставить внешнюю переменную, чтобы проверить:

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

ответил(а) 2017-06-26T18:35:00+03:00 2 года, 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема