javascript - 事件触发函数的返回值

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，我现在得到的是一个未定义错误，这让我认为变量的分配失败了。

Answer 1

答案:

您可以执行此操作，但必须考虑到该值在单击按钮之前是未定义。

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>