How to update interval time with external variable using jQuery

Question

我在 JS 中创建了这个脚本，当按下一个按钮时，一个音频文件会重复播放。对于上下文，音频文件是某种“哔哔声”，用作某种警报。必须播放哔哔声的速度取决于可以在名为“sound.php”的页面上找到的设置。

现在这个脚本部分起作用了。每当加载发声页面并按下“播放”按钮时，就会开始发出哔哔声，并以正确的频率听到。

但是实时改变sound.php的时间间隔时，蜂鸣声的频率不会随之改变

我相信现在的脚本会每 1000 毫秒从 sound.php 中检索一次间隔，但有些地方不对，我无法让它工作。

$(document).ready(function () {
    ajax_call = function() {
        $.ajax({
            type: "GET",
            url: "sound.php",
            dataType: "html",              
            success: function (response) {
                soundValue = response;
            }
        });
    };
    var interval = 1000; //refresh every second
    setInterval(ajax_call, interval);
});
    
function play() {
  const intervalTime = soundValue; // Interval time in milliseconds
  const interval = setInterval(function() {
    var audio = new Audio('beep.mp3');
    audio.play();
  }, intervalTime);
  
  setTimeout(function() {
    clearInterval(interval);
  }, 900000);
}

我在这里错过了什么？我没有监督的小事或重大缺陷？非常感谢任何帮助。

Answer 1

您需要检查

soundValue

是否已经改变。如果有，请清除间隔计时器并启动另一个。

let lastSoundValue;

function play() {
  let playInterval;
  let killTimer;

  playInterval = setInterval(function() {
    if (lastSoundValue !== soundValue) {
      clearInterval(playInterval);
      clearTimeout(killTimer);
      lastSoundValue = soundValue;
      play();
    } else {
      var audio = new Audio('beep.mp3');
      audio.play();
    }
  }, soundValue);
  killTimer = setTimeout(function() {
    clearInterval(playInterval);
  }, 900000);
}