在函数内部调用函数并返回一个值答案

【问题标题】：Call a function inside a function and return a value在函数内部调用函数并返回一个值
【发布时间】：2022-07-04 03:50:31
【问题描述】：

是否可以在单击按钮时调用函数、执行一些代码（例如将项目添加到数据库）以及访问在该函数中创建的变量？

例如，

const handleAddToDb = () => {
   let id = 123423r //note the ID is auto generated each time this function is called
   addToDb()
   return id
}
<button onClick={()=> {
  handleAddToDb()
}}>Click</button>
console.log(id???)   // any idea how to achieve this?

【问题讨论】：

我觉得你可以试试const id = handleAddToDb()
实现此目的的一种方法是将函数的返回值存储在全局变量中（假设您使用的是 vanilla JS）。
这个按钮有id吗？你有多个按钮吗？你只是想引用用户点击的按钮吗？
每次调用按钮，ID都是随机的
这个函数也存储在一个包含许多函数的 js 文件中，并且它被导入到需要它的每个组件中

标签： javascript

【解决方案1】：

<body>
    <button onclick="
            handleAddToDb()
    ">
    Click me
    </button>
</body>
<script>
    // let id is a global variable
    let id = 10;
    const handleAddToDb = () => {
        addToDb()
        console.log(id)
    }
    function addToDb(){
        id++;
    }
    console.log(id)    // any idea how to achieve this?
</script>

【讨论】：

【解决方案2】：

您可以让您的点击处理程序返回 id（正如您所做的那样）并将其分配给在您的外部范围内可访问的变量。

您还可以建立一个“存储”来负责管理所有数据，包括添加和跟踪新 ID。请参阅下面的 sn-p 以了解两个单独的按钮如何使用这种方法访问相同数据的非常简单的示例。

const addButton = document.getElementById('add');
const logButton = document.getElementById('log');

class Store {
  lastId = 0;
  
  add() {
    // do whatever you need to do.
    // increment and return the id.
    return this.lastId++;
  }
}

const store = new Store();

addButton.addEventListener('click', () => {
  store.add();
  console.log(store.lastId);
})

logButton.addEventListener('click', () => {
  console.log(store.lastId);
})

<button id="add">Add</button>

<button id="log">Log Last Id</button>

【讨论】：