如何在JavaScript中将函数用作变量？

我希望能够将代码放在一个地方，并从几个不同的事件调用它

目前我有一个选择器和一个事件：

$("input[type='checkbox']").on('click', function () {
  // code works here //
});

我在文件的其他地方使用了相同的代码，但是使用了不同的选择器

$(".product_table").on('change', '.edit_quantity', function () {
  // code works here //
});

我试着按照StackOverflow上其他地方给出的建议，简单地给我的函数命名，然后调用命名函数，但这对我来说不起作用。代码根本不运行

$(".product_table").on('change', '.edit_quantity', function () {
  calculateTotals() {
    // code does not work //
  }
});

因此，我尝试将代码与事件分开放入它自己的函数中，并在事件中调用它，但这对我也不起作用

calculateTotals() {
  // code does not work //
}

---

那么我做错了什么

看起来您的思路是对的，但语法不正确。调用函数时不需要

{}

。在

calculateTotals

函数中添加代码后，此代码应能正常运行

$(".product_table").on('change', '.edit_quantity', function () {
  calculateTotals();
});

$("input[type='checkbox']").on('click',function() {
  calculateTotals();
});

function calculateTotals() {
  //your code...
}

---

您可以将函数作为变量传递

要在加载DOM后添加事件的侦听器，请使用

$（document）.ready（fn）帮助（）

要修复代码，请执行以下操作：

 $(document).ready(function() {
   $("input[type='checkbox']").on('click', calculateTotalsEvent)
   $(".product_table").on('change', '.edit_quantity', calculateTotalsEvent)
 });

 function calculateTotalsEvent(evt) {
   //do something 
   alert('fired');
 }


更新：

文斯问道：

这对我来说很有效-谢谢，但是有一个问题：你说，“把你的函数作为变量传递”。。。我看不出你在做什么。你能解释一下吗？tks.–


响应：

在JavaScript中，您可以将函数分配给变量。
在执行以下操作时，您可能会一直这样做：

function hello() {
  //
}

您可以定义
窗口。您好


您正在添加到全局命名空间。



这通常会导致JavaScript架构/意大利面代码不明确。

我使用名称空间结构进行组织。

这方面的一个小例子是：

app.js

var app = {
  controllers: {}
};

app.controllers.somethingCtlr.eventName = function(evt) {
  //evt.preventDefault?
  //check origin of evt? switch? throw if no evt? test using instanceof?
  alert('hi');
}

您正在使用带有对象值的
controllers
键定义
window.app
（只是一个对象）

某物ctlr.js

var app = {
  controllers: {}
};

app.controllers.somethingCtlr.eventName = function(evt) {
  //evt.preventDefault?
  //check origin of evt? switch? throw if no evt? test using instanceof?
  alert('hi');
}

您正在先前定义的
app.controllers.SomethingCtr
上定义一个名为
eventName
的新键

您可以使用
（）调用函数

app.controllers.somethingctrr.eventName（）

这将转到对象中的键，然后调用它。
您可以像这样将函数作为变量传递

anotherFunction(app.controllers.somethingCtlr.eventName);

然后可以在函数中调用它，如下所示

function anotherFunction(someFn) { someFn();}

javascript
文件的结构如下：

  +-html
  +-stylesheets
  +-javascript-+
               +-app-+
                     +-app.js
                     +-controllers-+
                                   +-something-ctlr.js

通过以下方式调用：

app.controllers.somethingctrr.eventName（）

可以将其作为变量传递，如下所示：

$(document).ready(function() {
  $('button').click(app.controllers.somethingCtlr.eventName);
});

JQuery（）

我希望这有帮助，
Rhys
你可以把它浓缩成一个函数。onchange事件适用于复选框和文本输入（无需单击处理程序）。jQuery允许您添加多个选择器


$（'input[type=checkbox]，.product\u table.edit\u quantity'）。在（'change'，function（）上{
log（'进行一些计算…'）；
});

为什么不在事件处理程序中定义函数？这太错误了。请在事件处理程序之外定义函数：
函数calculateTotals（）{}
。然后您可以在事件处理程序中调用
calculateTotals（）
。@ÖzgürErsil感谢您的反馈-很抱歉，我是JS新手。我不确定我是否理解你的评论。我尝试将代码放入自己的函数中，然后在点击事件后启动它，但它不起作用。出于某种原因，我已经尝试了您的方法，但无法使其起作用-不过感谢您的反馈！这对我来说很有效-谢谢，但是有一个问题：你说，“把你的函数作为变量传递”。。。我看不出你在做什么。你能解释一下吗？更详细地说，在我的一次活动中，我不得不使用这个sytax使其工作：“$”（“输入[type='checkbox']”）。在（'click'，calculateTotals（），function（）{$（this）。最近的（'tr.delete_row”）。remove（）；“Javascript中的函数就是我们所说的“第一类对象”。这意味着函数是一个可以传递并分配给变量的对象。在您提供的示例中，您正在创建一个函数并立即将其传递到调用中，方法与“单击”相同。您还可以调用
var c='click'；$（'input'）。on（c，…etc
任何地方你可以给变量赋值，你也可以给它赋值，任何地方你可以使用变量，你可以使用一个有赋值函数的变量。
var x=function（）{}；
无异于说
var x=5；
我已经更新了我的答案以回应你的评论@Vince