如何导出含事件监听作用域值的函数以避免undefined？

我希望导出函数manualStrobeTimeout，使其包含manualBPM_text.addEventListener("change")作用域内指定的值。目前控制台打印导出结果为undefined，说明变量值未从声明时更新。如何导出带有该作用域内值的函数？需注意不能在事件监听器外声明函数值，否则会干扰set intervals。

相关模块代码如下：

import { strobeActive } from "./onBtn.js"; // variable to check if ON button is active/pressed

// manual bpm variables definition and event listener
var manualBPM = 0;
var manualBPM_interval = 0;

const body = document.querySelector("body");
var ranTimes = 0;

// strobe duration variable definition and event listener
var duration = 100;
const slider = document.getElementById("MM-duration-slider");
slider.addEventListener("input", function() {
    duration = slider.value;
}, false);

var manualBPM_text = document.getElementById("manual-value");
var manualStrobeTimeout;

if (strobeActive == true) {
    manualBPM_text.addEventListener("change", function() {
        clearInterval(manualStrobeTimeout); // so that old value doesn't interfere with new value

        manualBPM = manualBPM_text.value;
        manualBPM_interval = (60 / manualBPM) * 1000;

        manualStrobeTimeout = function() {
            // repeat once the interval expires
            setInterval(function() {
                // trigger strobe
                body.classList.remove("bg-black");
                body.classList.add("bg-white");

                // kill strobe once the strobe duration expires
                setTimeout(function() {
                    body.classList.remove("bg-white");
                    body.classList.add("bg-black");
                }, duration);
                
                ranTimes++;
                console.log("BPM: " + manualBPM + " (source: " + BPMvalueSource + ") | Strobe duration: " + duration + "ms | " + "Times ran: " + ranTimes);
            }, manualBPM_interval);
        }
    }, false);
}

export { manualBPM_text };
export { manualStrobeTimeout };

我想在另一个JS文件中使用该导入函数，代码如下：

if (BPMvalueSource == "manual") { 
            manualStrobeTimeout();
            console.log(manualStrobeTimeout()); // returns "undefined"
        } else if (BPMvalueSource == "tap") { 
            tapBPM_strobe();
        }

我尝试过用window.将函数设为全局但无效，也确认了导入导出正确，试过动态导入也没用。两个JS文件都设置了type="module"属性。

核心问题拆解 #

1. manualStrobeTimeout初始值为undefined，只有用户触发输入框change事件后才会被赋值为函数——如果提前调用，必然返回undefined或报错。
2. 你错误地用clearInterval(manualStrobeTimeout)清除定时器：manualStrobeTimeout是函数，而setInterval返回的是定时器ID，必须单独存储这个ID才能正确清除旧定时器。
3. 原manualStrobeTimeout函数没有返回值，所以调用console.log(manualStrobeTimeout())必然输出undefined。

修改实现步骤 #

1. 重构模块代码，分离逻辑与控制

import { strobeActive } from "./onBtn.js";

var manualBPM = 0;
var manualBPM_interval = 0;
const body = document.querySelector("body");
var ranTimes = 0;
var duration = 100;
const slider = document.getElementById("MM-duration-slider");
slider.addEventListener("input", function() {
    duration = slider.value;
}, false);

var manualBPM_text = document.getElementById("manual-value");
// 单独存储定时器ID，避免和函数混淆
let manualStrobeTimerId = null;

// 封装频闪核心逻辑，接收动态参数
function runStrobe(interval, dur) {
    return setInterval(function() {
        body.classList.remove("bg-black");
        body.classList.add("bg-white");
        setTimeout(function() {
            body.classList.remove("bg-white");
            body.classList.add("bg-black");
        }, dur);
        ranTimes++;
        console.log(`BPM: ${manualBPM} (source: ${BPMvalueSource}) | Strobe duration: ${dur}ms | Times ran: ${ranTimes}`);
    }, interval);
}

// 导出控制函数，始终存在可调用
export function manualStrobeTimeout() {
    // 先清除旧定时器
    if (manualStrobeTimerId) {
        clearInterval(manualStrobeTimerId);
    }
    // 有有效BPM值时启动新定时器
    if (manualBPM > 0) {
        manualStrobeTimerId = runStrobe(manualBPM_interval, duration);
        return manualStrobeTimerId; // 返回定时器ID方便后续操作
    }
    return "No valid manual BPM configured";
}

if (strobeActive) {
    manualBPM_text.addEventListener("change", function() {
        manualBPM = manualBPM_text.value;
        manualBPM_interval = (60 / manualBPM) * 1000;
        // 修改后立即生效
        manualStrobeTimeout();
    }, false);
}

export { manualBPM_text };

2. 调整调用文件代码

import { manualStrobeTimeout } from './你的模块文件名.js';

if (BPMvalueSource == "manual") { 
    const timerStatus = manualStrobeTimeout();
    console.log(timerStatus); // 会返回定时器ID或提示文本，不再是undefined
} else if (BPMvalueSource == "tap") { 
    tapBPM_strobe();
}

优化说明 #

• 核心逻辑与控制函数分离，避免在事件回调中重复定义函数，保证导出的函数始终可调用。
• 单独存储定时器ID，彻底解决旧定时器无法清除的问题，避免多定时器冲突。
• 导出的函数支持返回状态值，方便调试和后续扩展。

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