javascript 如何导出此函数而不定义其值?[duplicate]

tvz2xvvm  于 2023-02-15  发布在  Java
关注(0)|答案(2)|浏览(137)
    • 此问题在此处已有答案**:

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference(7个答案)
17小时前关门了。
我想导出函数manualStrobeTimeout,其值在manualBPM_text.addEventListener("change")的作用域中指定。现在,控制台将导出记录为undefined,这意味着该值与声明变量时的值没有变化。我如何导出函数,其值在该作用域中声明?请记住,我不能在事件侦听器之外声明函数的值。因为这将干扰设定的间隔。
下面是相关模块的代码:

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"

rxztt3cl

rxztt3cl1#

  1. clearInterval未清除间隔。
    1.由于从未调用过 Package 函数,因此interval甚至无法运行
    1.无法导出非常数值
let lastManualBPMValue;

if (strobeActive == true) {
    manualBPM_text.addEventListener("change", function() {
        lastManualBPMValue = manualBPM_text.value;
    }, false);
}

export { manualBPM_text };

let manualStrobeTimeout;
export function manualStrobe() {
    clearInterval(manualStrobeTimeout); // so that old value doesn't interfere with new value
    manualBPM_interval = (60 / lastManualBPMValue) * 1000;
    manualStrobeTimeout = setInterval(function() {
        ...
    }, manualBPM_interval);
}
cgvd09ve

cgvd09ve2#

分配给manualStrobeTimeout变量的函数中没有return语句,因此在执行时总是返回undefined
如果您想检查manualStrobeTimeout是否被赋值,您可能想执行console.log(manualStrobeTimeout),它将记录赋值给变量的值。
使用console.log(manualStrobeTimeout())执行manualStrobeTimeout函数,其返回值将被馈送到console.log。JavaScript函数的返回值默认为undefined
请记住,除非触发了"change"事件侦听器,否则manualStrobeTimeout不是函数。
您没有直接询问这一点,但您可能还想查看clearInterval()的文档。代码试图在函数上调用clearInterval,而不是在区间ID上。

相关问题