Return 事件触发函数的值

Question

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

我想在单击按钮后调用函数 play，然后 return 将值（如代码中所示）传递给一个变量，以使它们可以访问未来的用途。

我已经实现了所有我需要的东西（我正在弄乱网络音频 api）并且它工作正常，test1 变量 "embeddeds" 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 变量没有。

如何在事件调用函数后将函数的 returned 对象赋值给变量？

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

Answer 1

addEventListener，按照设计，意味着不 return 任何东西（感谢 @AmitJoki 提到这一点）as you can read in the MDN docs.

相关部分是（摘自this section）

Event listeners only take one argument, the Event Object, which is automatically passed to the listener, and the return value is ignored

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

如果您想将结果分配给全局变量 test，您应该在内部您的 play 回调中这样做。

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

答案：

你可以这样做，但是你必须考虑到这个值是 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>

Return 事件触发函数的值

Return value of event triggered function

javascript

function

button

listener

答案：