入れ子関数と無名関数から値を返す方法は？

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); 

）私は（関数呼び出しの外インデクサ値を使用したい）が、私は（にconsole.logをやってみたときに、それだけで未定義を言います。

私は関数（インデクサー変数）の外でクリックしたリンクのインデックス値を渡すことができるように、これをどのように構造化しますか？

私はプログラミングの初心者ですので、私に同行してください。

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); 

イベントハンドラから値を返すことができない理由は、スクリプトがページの他のすべてを処理する同じスレッドで実行されるためです。イベントハンドラが値を返す方法を理論的に設計する場合は、イベントが発生するまでスレッドをブロックする必要があります。これは、ハンドラが関連付けられたイベントが発生するまでページがフリーズすることを意味する。ユーザがボタンをクリックする。