一次滾動觸發播放功能

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公用事業優勢，但你可以使用一些其他圖書館一樣下劃線或者只是找出代碼來節制。