（為什么）jQuery .click（）需要回調函數？

Question

我有以下jQuery代碼：

function next() {
    //some code here
}

function previous() {
    //some code here
}

$("#next").click(function(){
    next();
});

$("#previous").click(function(){
    previous();
});

這可以，但是不能：

$("#next").click(next());

$("#previous").click(previous());

為什么會這樣呢？ 我的代碼有問題嗎，或者這只是jQuery的問題？ 注意： #next和#previous指的是我的html文件中的兩個按鈕。

Answer 1

回調應該是對該函數的reference 。

為什么$("#next").click(next()); 不起作用？

func()是函數調用，而不是引用，這就是為什么立即調用它的原因。

---

這個，

$("#next").click(function(){
    next();
});

如果需要傳遞參數，則是一種更好的方法。

其他，

$("#next").click(next) //notice just the signature without ()

Answer 2

這有效（如果定義了next和previous功能）：

$("#next").click(next);

$("#previous").click(previous);

在這種情況下， next和previous也是回調函數，兩者之間的區別是，

當您撥打此行

$("#next").click(next()); 該函數將立即執行，並將下一個函數的結果傳遞給jQuery的eventHandler。

在這種情況下

$("#next").click(next); 您正在將函數傳遞到jQuery的EventHandler 旁邊 。

順便說一句：在jQuery API文檔（ https://api.jquery.com/click/ ）中，它顯示了click函數的所有參數以及它指出的必需類型： “ ... handler Type：Function（Event eventObject）A每次事件觸發時執行的函數。

Answer 3

嘗試這樣，您將得到答案，

function next() {
    //some code here
}

function previous() {
    //some code here
}

$("#next").click(next);

$("#previous").click(previous);

工作演示jsfiddle示例

Answer 4

發生的事情被匿名函數function() { ... }的語法所掩蓋。 您正在執行的操作是傳遞一個函數，而不調用它。 我想解釋一下這是如何工作的：

如果你有一個簡單的功能

function next() { return 5 };

如果您從某個地方調用它，它將僅返回值5：

a = next(); // value of a will be 5

但是，您也可以將整個函數傳遞a 。 這是可能的，因為JavaScript中的函數實際上是對象：

a = next;
b = a();    // value of b will be 5

如果您查看語法，它會向您顯示，將括號()放在函數的末尾會調用它，並返回返回值。 而沒有括號的裸露的字符串會為您提供函數本身。

那么，什么是回調，而click()作為參數希望獲得什么呢？ 回調函數是一個函數，稍后會被調用； 我們實際上將其移交給以后打電話。 click()希望獲得這樣的函數作為參數，現在應該很清楚，我們必須傳遞不帶括號的函數，以使click()可以調用它，而不僅僅是傳遞5 。

$("#next").click(next);

那么，帶有匿名函數的初始語法如何工作？

function() { next(); }

實際上將您的next()包裝到另一個函數中，該函數是匿名的-因為它沒有名稱-但其工作方式與命名函數相同。 您甚至可以通過它設置變量：

a = function() { next(); }  // a will be the anonymous function that calls next()

但是調用該函數a()不會返回任何內容，因為匿名函數不會返回任何值（准確地說：JavaScript中的每個函數調用至少都返回undefined ，但這是一個技術細節）。 甚至可以通過在其末尾加上括號來立即調用它：

a = function() { return next(); }()   // value of a will be 5

添加return會有保證，返回值next()將通過匿名函數傳遞。

這應該弄清楚為什么

$("#next").click(function(){ next(); });

在工作，為什么

$("#next").click(next());

不是，但是

$("#next").click(next);

將是一個很好的解決方案。

Answer 5

$（ “＃未來”）單擊（下）; 會工作。 注意，不需要括號，因為函數/回調處理程序應作為參數傳遞。