throttle() - lodash

throttle 함수는 주어진 시간 간격 동안 함수를 한 번만 실행하도록 제한합니다. 즉, 함수가 여러 번 호출되더라도 일정한 시간 간격 내에서는 한 번만 실행됩니다. throttle(callback, time)

//npm install lodash

import { throttle } from 'lodash'

const playAudio = throttle(()=> {
  const audio = new Audio("/alert-alarm.wav")
  audio.play();
},8000)

이렇게 하면 playAudio()가 setInverval()함수에 의해 1000ms 미만으로 불려도, alarm 사운드 길이에 관계없이  8초의 간격으로 alert-alarm.wav 를 실행함.

const playAudio = ()=> {
    const audio = new Audio("/alert-alarm.wav")
    audio.play();

  }
const throttleButton = throttle(playAudio,8000)

let intervalId;
const alarmStart = ()=>{
    intervalId = setInterval(throttleButton,4000)
    console.log("alarm started")
}
const alarmStop = ()=> {
    clearInterval(intervalId)
    console.log("alarm stopped")
}

document.getElementById('btn').addEventListener(
    'click', 
    alarmStart
    
);
document.getElementById('cansel').addEventListener(
    'click', 
    alarmStop
);

참고: Vanila JavaScript로 사용하는 경우 CDN 또는 npm init, npm install, npm install lodash 후에

<script src = "main.js"  type= "module"> </script>

로 사용 가능