如何從嵌套和匿名函數返回值？

Question

我有這個JS代碼：

function paging() { 
    $('.paging li').click(function(e) {
        $('.paging li a').removeClass("active");
        $(this).find('a').addClass("active");
        $('#img-grp-wrap img').hide();

        var indexer = $(this).index(); 
        $('#img-grp-wrap img:eq('+indexer+')').fadeIn();    

        e.preventDefault();
        return indexer;
    });
}

var $cur_page = paging();
console.log($cur_page);

我想在函數pageing（）之外使用索引器值，但是當我嘗試執行console.log（）時，它只是說undefined 。

如何構造該結構，以便可以在函數外傳遞單擊的鏈接的索引值（這是索引器變量）？

我是編程新手，所以請多多包涵。

Answer 1

聽起來您真的不了解事件處理程序是如何工作的。 當您安裝點擊處理程序時，您是在告訴系統您希望在將來某個時間發生點擊時調用此函數。 在您的元素被單擊並調用匿名函數之前，您的函數paging()運行並完成了很長時間。 因此， paging()函數無法返回點擊處理程序的結果，因為點擊尚未發生。

如果您有一些想要使用indexer值的代碼，則需要從單擊處理程序中調用該代碼，並將indexer的值作為參數傳遞給您要調用的函數。 可能看起來像這樣：

$('.paging li').click(function(e) {
    $('.paging li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('#img-grp-wrap img').hide();

    var indexer = $(this).index(); 
    $('#img-grp-wrap img:eq('+indexer+')').fadeIn();    

    e.preventDefault();
    // call a function and pass it the indexer value
    processIndex(indexer);
});

注意，我還刪除了分頁功能，因為您不想多次調用它，因為它會再次安裝事件處理程序。

Answer 2

正如@ jfriend00所說，由於事件處理程序的工作方式，您無法以您所認為的方式訪問事件處理程序的返回值。

但是，您當然可以讓他們在外部（例如，全局）范圍內設置變量，然后讓他們觸發事件發生后需要執行的任何操作。 或者，您可以將值作為參數傳遞給另一個函數。

例如

// Declare external variable outside event handler.
var pagingOutput;

function paging() { 
    $('.paging li').click(function(e) {
        // Handle event...

        pagingOutput = someValue;
        actionToPerfomAfterPaging();

        // Of course, you could also do something like this...
        actionToPerformAfterPaging_2(someValue);

    });
}

function actionToPerfomAfterPaging() {
    doSomethingWithPagingOutput(pagingOutput);
}

function actionToPerfomAfterPaging_2(val) {
    doSomethingWithPagingOutput(val);
}

var $cur_page = paging();
console.log($cur_page);

您無法從事件處理程序返回值的原因是該腳本在負責處理頁面上其他所有內容的同一線程上運行。 如果理論上要設計一種事件處理程序返回值的方法，則必須阻塞線程，直到事件觸發為止。 這意味着該頁面將凍結，直到發生與處理程序相關的任何事件，例如用戶單擊按鈕。