滚动一次触发播放功能

Question

我想在滚动到定义的 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();
    }
});

Answer 1

也许你可以放一个外部变量来检查：

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 实用程序，但您可以使用其他一些库，例如下划线，或者只是找出代码来限制。