事件触发函数的返回值

Question

我只是实现了一个在单击按钮后调用的函数。该函数工作正常，但我无法让它返回一个值并将其分配给一个变量。

我想在单击按钮后调用函数play，然后将值（如代码所示）返回给变量，以便将来使用它们。

我已经实现了我需要的所有东西（我正在搞乱网络音频 api）并且它工作正常，test1 变量“嵌入”了osc 和 lfo 变量，我能够在函数之外访问它们。

var ac = new AudioContext();

function play(){
     var osc = ac.createOscillator();
     var lfo = ac.createOscillator();
     osc.frequency.value=1000;
     console.log("Clicked!!");
     returnedObject={};
     returnedObject["value1"] = osc;
     returnedObject["value2"] = lfo;
     return returnedObject;
};

var test1= play();
var test= document.getElementById("mybtn").addEventListener("click", play);

test1 变量包含我需要的内容，但 test 变量没有。

如何在事件调用函数的返回对象后将其分配给变量？

如果我使用test.value1，我现在得到的是undefined 错误，这让我认为变量的分配失败。

Answer 1

答案：

您可以这样做，但您必须考虑到该值是undefined，直到单击按钮。

var ac = new AudioContext();

function play(){
     var osc = ac.createOscillator();
     var lfo = ac.createOscillator();
     console.log("Clicked!!");
     returnedObject={};
     returnedObject["value1"] = osc;
     returnedObject["value2"] = lfo;
     return returnedObject;
};

var test;
document.getElementById("mybtn").addEventListener("click", () => (test = play()));

<button id="mybtn">click me</button>

---

为了使用数据执行功能，您可能需要创建一个中间函数来处理您想要完成的任何工作：

var ac = new AudioContext();

function play(){
     var osc = ac.createOscillator();
     var lfo = ac.createOscillator();
     console.log("Clicked!!");
     returnedObject={};
     returnedObject["value1"] = osc;
     returnedObject["value2"] = lfo;
     return returnedObject;
};

function middle(fn) {
return function() {
let data = fn();

//do something
console.dir(data);
}
}

document.getElementById("mybtn").addEventListener("click", middle(play));

<button id="mybtn">click me</button>

---

或者，您可以创建一个保存数据的构造函数，从而允许您向构造函数添加方法以供以后操作：

function Player() {
  let proto = {};
  proto.ac = new AudioContext();
  proto.data = [];
  proto.play = function() {
    var osc = proto.ac.createOscillator();
    var lfo = proto.ac.createOscillator();
     proto.data.push({
      value1: osc,
      value2: lfo
    });
 proto.latest = proto.data[proto.data.length-1];
        console.log("Clicked!!", proto.latest);
  };
  

  return proto;
}

const myPlayer = new Player();

document.getElementById("mybtn").addEventListener("click", myPlayer.play);

<button id="mybtn">click me</button>

Answer 2

我会建议你改用闭包。 试试这样的。

 // closure
        function audioControl() {

            var ac = new AudioContext();
            var props = {
                value1: ac.createOscillator(),
                value2: ac.createOscillator()
            };
            // function play
            function play() {
                osc.frequency.value = 1000;
                console.log("Clicked!!");
                props.value1 = "_modified_value";
                props.value2 = "_modified_value";
            }
            return {
                props: props,
                play: play
            }
        };

        var test1 = audioControl();
        var test = document.getElementById("mybtn").addEventListener("click", test1.play);

        // now you can get values anywhere anytime using
        // -- test1.props.value1;

Answer 3

addEventListener 在设计上是为了不返回任何东西（感谢@AmitJoki 提及）as you can read in the MDN docs。

相关部分为（摘自this section）

事件监听器只接受一个参数，即Event Object，它会自动传递给监听器，返回值被忽略

这背后的原因是addEventListener只是为了注册一个事件，而不是处理它的结果。

如果您想将结果分配给全局变量 test，您应该在您的 play 回调内部执行此操作。