如何用jQuery通过外部变量更新音频播放的间隔时间

问题根源 #

你当前的代码里，点击「播放」按钮执行play()时，intervalTime会取当时soundValue的值创建定时器，之后哪怕ajax_call更新了soundValue，已经运行的定时器不会自动变更间隔——因为setInterval的间隔是在初始化时就固定死的。

修复方案 #

要实现实时同步间隔，需要做到这几点：

• 把播放用的定时器变量改成全局可访问，方便后续清除
• 每次获取到新的间隔值时，若当前正在播放，就销毁旧定时器，用新间隔重新创建
• 注意把ajax返回的字符串转成数字类型，避免定时器出错
• 优化音频对象创建，重复创建会浪费资源，建议提前初始化复用

修改后的完整代码 #

$(document).ready(function () {
    // 全局变量：存储当前播放定时器、音频对象、间隔值
    let playInterval = null;
    const beepAudio = new Audio('beep.mp3');
    let soundValue = 0;

    ajax_call = function() {
        $.ajax({
            type: "GET",
            url: "sound.php",
            dataType: "html",              
            success: function (response) {
                // 把返回的字符串转成数字，去除多余空格
                const newInterval = parseInt(response.trim(), 10);
                // 只有新间隔和旧值不同时才处理
                if (newInterval !== soundValue) {
                    soundValue = newInterval;
                    // 如果当前正在播放，立即更新定时器
                    if (playInterval !== null) {
                        clearInterval(playInterval);
                        startPlayInterval();
                    }
                }
            }
        });
    };

    // 封装启动播放定时器的逻辑，避免重复代码
    function startPlayInterval() {
        playInterval = setInterval(function() {
            // 重置音频播放位置，确保每次从头播放
            beepAudio.currentTime = 0;
            beepAudio.play();
        }, soundValue);

        // 15分钟后自动停止播放
        setTimeout(function() {
            clearInterval(playInterval);
            playInterval = null;
        }, 900000);
    }

    // 每秒获取一次最新间隔设置
    setInterval(ajax_call, 1000);
});
    
function play() {
    // 如果已有播放定时器，先清除旧的
    if (window.playInterval !== null) {
        clearInterval(window.playInterval);
    }
    // 启动新的播放流程
    window.startPlayInterval();
}

关键改动说明 #

• 新增全局变量playInterval跟踪播放状态，beepAudio复用音频对象减少资源消耗
• ajax_call中判断间隔值是否变化，变化时自动更新正在运行的播放定时器
• 封装startPlayInterval函数，统一处理播放定时器的创建和自动停止逻辑
• 播放音频前重置currentTime，避免音频未播放完就重复触发导致的异常

内容的提问来源于stack exchange，提问作者Nour