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

滚动一次触发播放功能

1 个答案: